PhpStorm 9.0.0 Help

Debugging JavaScript

On this page:

Basic Terms

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. 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, PhpStorm distinguishes between local and remote debugging modes.

  1. Local debugging. In this mode, the application files remain where they are in the PhpStorm project on you machine. PhpStorm runs them on the built-in Web server with the root URL http://localhost:<built-in server port>/<project root>. The built-in server port (1024 or higher) is specified on the Debugger. Data Views page of the Settings dialog box. A debugging session in this mode can be initiated in two ways:
    • Open the HTML file with the JavaScript injection to be tested and launch the temporary run/debug configuration that PhpStorm has generated automatically. This approach it helpful when you do not need to debug the entire application but just one script.
    • Create and launch a permanent debug configuration.
    For details, see Temporary and Permanent Run/Debug Configurations.
  2. Remote debugging. In this mode, the application files are on an external web server and you have their copies in a PhpStorm project on your computer. No matter, whether the web server itself is running on a physically remote host or on your machine, application files deployed on it are treated as remote. For details, see Working with Web Servers: Copying Files.

    You can deploy the application files to a web server and launch the application yourself or debug an already running application.

    When a remote HTML file with a JavaScript injection is opened, the debugger tells PhpStorm the name of the currently processed file and the number of the line to be processed. PhpStorm opens the local copy of this file and indicates the line with the provided number. This behaviour is enabled by specifying correspondence between files and folders on the server and their local copies. This correspondence is called mapping, it is set in the debug configuration.

    A Remote debugging session can be initiated only through a permanent debug configuration that you have to define yourself manually.

PhpStorm supports JavaScript debugging in Chrome and Firefox. In Google Chrome and other browsers of the Chrome family, all the debugging modes are supported. In Firefox, remote debugging is not supported at all. For versions 33, 34, and 35, local debugging through a Firefox Remote debug configuration is supported as a temporary workaround.

Starting a Debugging Session by Opening an HTML File from PhpStorm (Local Debugging)

  1. Set the breakpoints in the JavaScript code, as required.
  2. Open the HTML file with the JavaScript injection to debug or select the HTML file in the Project view.
  3. On the context menu of the editor or the selection, choose Debug <file name>. The automatically generated debug configuration starts a debugging session. This configuration is temporary but you can save it later.

    The file opens in the default browser and the Debug tool window appears.

  4. If you are using Chrome or Dartium, you need a Chrome extension. If the extension is not installed and activated in your browser, the Debug tool window shows a message with a link to the web store where the extension is available. Click the link and install the extension. For details, see Using JetBrains Chrome Extension.
  5. In the Debug tool window, proceed as usual: step through the program, stop and resume program execution, examine it when suspended, view actual HTML DOM, edit the code, etc.

Starting a Debugging Session through a User-defined Configuration (Local Debugging)

  1. Set the breakpoints in the JavaScript code, as required.
  2. Create a permanent debug configuration.
    1. On the main menu, choose Run | Edit Configurations.
    2. Click the Add New Configuration toolbar button add.png, and choose JavaScript Debug on the context menu.
    3. In the Run/Debug Configuration: JavaScript Debug dialog box that opens, specify the following:
      • The URL address of the HTML file that implements the page to start debugging from. Use the following format: http://localhost:<built-in server port>/<project root>/<path to the HTML file relative to the project root>
      • Choose the browser to debug the application in (Firefox or Chrome).
    4. Click OK to save the configuration settings.
  3. Choose the newly created configuration in the Select run/debug configuration drop-down list on the tool bar and click the Debug toolbar button debug.

    The HTML file specified in the run configuration opens in the chosen browser and the Debug tool window appears.

  4. If you are using Chrome or Dartium, you need a Chrome extension. If the extension is not installed and activated in your browser, the Debug tool window shows a message with a link to the web store where the extension is available. Click the link and install the extension. For details, see Using JetBrains Chrome Extension.
  5. In the Debug tool window, proceed as usual: step through the program, stop and resume program execution, examine it when suspended, view actual HTML DOM, edit the code, etc.

Local Debugging in Firefox

Due to the recent crucial changes in the Firefox architecture, neither remote debugging nor standard for PhpStorm local debugging work for Firefox. This procedure is a temporary solution and is applicable to Firefox versions 33, 34, and 35.

  1. Enable debugging in Firefox:
    1. Open your Firefox browser, click chrome_extension_control_icon on the toolbar, and then click Developer to open the Web developer tools.
      js_debugging_enable_debugging_in_ff.png
      From the context menu that opens, choose Toggle Tools.
      js_debugging_enable_debugging_in_ff_toggle_tools.png
    2. In the Development Tools pane that opens, click Toolbox Options button cogwheel on the toolbar and select the Enable remote debugging check box under Advanced Settings.
      js_debugging_enable_debugging_in_ff_advanced_settings.png
    3. Click chrome_extension_control_icon again, click Developer, and then choose Developer Toolbar from the context menu.
      js_debugging_enable_debugging_in_ff_dev_toolbar.png
    4. In the console that opens at the bottom of the browser, type listen <port number>.
      js_debugging_enable_debugging_in_ff_console_listen.png
      You can specify any port number, however it is recommended that you use 6000 and higher. Later you will specify this port number in the run configuration.
  2. Create a run/debug configuration:
    1. Choose Run | Edit Configuration on the main menu. Alternatively, click Shift+Alt+F10 and select Edit Configuration from the pop-up menu.
    2. In the Edit Configuration dialog box, that opens, click the Add New Configuration toolbar button add.png, and choose Firefox Remote on the context menu. Do not feel mislead by the term Remote. In this context it reflects the technical details of the implementation.
    3. In the Run/Debug Configuration: Firefox Remote dialog box that opens, specify the host where the application is running (currently it is always localhost) and the port the debugger will listen to. It must be the port that you specified when enabling debugging in Firefox. The default value is 6000.
    4. Click OK to save the configuration settings.
  3. Set the breakpoints where necessary.
  4. Open the HTML file with the JavaScript injection in the editor or select it in the Project tool window, choose Open in Browser on the context menu of the selection, then choose Firefox. The browser opens showing the application after the code execution, that is, the breakpoints you set have no effect yet.
  5. Choose the newly created configuration in the Select run/debug configuration drop-down list on the toolbar and click the Debug toolbar button debug. In the dialog bo that opens, click OK to allow incoming connections. From the Choose Page to Debug pop-up list, choose the page with your application.
  6. Refresh the page with your application in Firefox: the page shows the results of code execution up to the first breakpoint.
  7. In the Debug tool window, proceed as usual: step through the program, stop and resume program execution, examine it when suspended, view actual HTML DOM, edit the code, etc.

Remote Debugging

  1. Set the breakpoints in the JavaScript code, as required.
  2. Create a permanent debug configuration.
    1. Choose Run | Edit Configuration on the main menu. Alternatively, click Shift+Alt+F10 and select Edit Configuration from the pop-up menu.
    2. In the Edit Configuration dialog box, that opens, click the Add New Configuration toolbar button add.png, and choose JavScript Debug on the context menu.
    3. In the Run/Debug Configuration: JavaScript Debug dialog box that opens, specify the following:
      • The URL address of the HTML file that implements the page to start debugging from. This URL address should correspond with the server access configuration.
      • Choose the browser to debug the application in (Firefox or Chrome).
      • Optionally define mappings between local files and URL addresses of their copies on the server. These mappings are required only if the local folder structure under the project root differs from the folder structure on the server. If the structures are identical, PhpStorm itself "retrieves" the paths to local files by parsing the URL addresses of their copies on the server.
    4. Click OK to save the configuration settings.
  3. Choose the newly created configuration in the Select run/debug configuration drop-down list on the tool bar and click the Debug toolbar button debug.

    The HTML file specified in the run configuration opens in the chosen browser and the Debug tool window appears.

  4. If you are using Chrome or Dartium, you need a Chrome extension. If the extension is not installed and activated in your browser, the Debug tool window shows a message with a link to the web store where the extension is available. Click the link and install the extension. For details, see Using JetBrains Chrome Extension.
  5. In the Debug tool window, proceed as usual: step through the program, stop and resume program execution, examine it when suspended, view actual HTML DOM, edit the code, etc.

See Also

Last modified: 13 August 2015