WebStorm 6.0.1 Web Help

When an HTML file with injected JavaScript code is opened in the browser, the script execution starts and suspends on reaching the first breakpoint, whereupon you can analyze the suspended program, step through it, resume execution when ready, etc.

Note

This HTML file does not necessarily have to be the one that implements the starting page of the application.

Depending on the location of the application files, WebStorm distinguishes between the following local and remote debugging modes.

To debug JavaScript code in a single local HTML file
  1. Set the breakpoints in the JavaScript injections, as required.
  2. Open the required HTML file or select it in the Project view.
  3. On the context menu, choose Debug <file name>. The file opens in the default browser.
  4. In the Debug tool window that opens, proceed as usual: step through the program, stop and resume program execution, examine it when suspended, etc.
To initiate a local debugging session through a debug configuration
  1. Set the breakpoints in the JavaScript injections, as required.
  2. Create a debug configuration of the type JavaScript Debug - Local.
    1. On the main menu, choose Run | Edit Configurations.
    2. Click the Add New Configuration toolbar button add.png, and choose JavaScript Debug - Local on the context menu.
    3. In the Run/Debug Configuration: JavaScript Debug dialog box that opens, specify the full path to the HTML file that implements the page to start debugging from. Choose the browser to debug the application in (Firefox or Google Chrome). Click OK to save the configuration settings.
  3. Choose Run | Debug on the main menu, or click the Debug button debug on the toolbar, or press Shift+F9Shift+F9Shift+F9Shift+F9Shift+F9Alt+F5Ctrl+F5Alt+Shift+D or Shift+F9Shift F9Shift F9Meta F11. The specified starting HTML file opens in the default browser.
  4. In the Debug tool window that opens, proceed as usual: step through the program, stop and resume program execution, examine it when suspended, etc.
To debug a remote application with JavaScript injections
  1. Synchronize with the server where the target application is deployed.

    Note

    Interaction with servers is supported through the Remote Hosts Access bundled plugin, which is by default enabled. If not, activate it in the Plugins page of the Settings dialog box.

    1. Configure access to the server and to the application files.
    2. Configure the synchronization.
    3. Download the application files.
  2. Set the breakpoints in the JavaScript injections, as required.
  3. Create a debug configuration of the type JavaScript Debug - Remote.
    1. On the main menu, choose Run | Edit Configurations.
    2. Click the Add New Configuration toolbar button add.png, and choose JavaScript Debug - Remote on the context menu.
    3. In the Run/Debug Configuration: JavaScript Debug dialog box that opens, choose the browser to debug the application in (Firefox or Google Chrome).

      In the URL to open text box, type the URL address of the page to start debugging from.

      Set correspondence between files on the server and their local copies by mapping paths to local files to URL addresses of files on the server. You can specify URL addresses in the absolute form (http://<host>:<port>/<path_to_server_root>/<path_to_file>) or relative to the server root URL (/<path_to_file>).

      Click OK to save the configuration settings.

  4. Choose Run | Debug on the main menu, or click Debug button debug on the toolbar, or press Shift+F9Shift+F9Shift+F9Shift+F9Shift+F9Alt+F5Ctrl+F5Alt+Shift+D or Shift+F9Shift F9Shift F9Meta F11. The specified starting HTML file opens in the default browser.
  5. In the Debug tool window that opens, proceed as usual: step through the program, stop and resume program execution, examine it when suspended, etc.

See Also

Procedures:

Reference:

External Links:

Web Resources: