IntelliJ IDEA 2017.2 Help

Debugging JavaScript in Firefox

This feature is supported in the Ultimate edition only.

With IntelliJ IDEA, you can debug your client-side JavaScript in Firefox, version 36 and higher, using the Firefox remote debugging functionality. However it is strongly recommended that you use Chrome or any other browser of the Chrome family.

On this page:

Enabling debugging in Firefox

With IntelliJ IDEA, you can debug your client-side JavaScript in Firefox, version 36 and higher, using the Firefox remote debugging functionality.

To enable Firefox remote debugging

  1. Open your Firefox browser, then open Tools | Developer | Toggle Tools.
  2. In the Development Tools pane that opens, click Toolbox Options button /help/img/idea/2017.2/cogwheel.png on the toolbar and select the Enable remote debugging check box under Advanced Settings.
    js_debugging_enable_debugging_in_ff_advanced_settings.png
  3. Choose Tools | Developer | Developer Toolbar. 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 set any port number, however it is recommended that you use 6000 and higher. Later you will specify this port number in the run configuration.

Debugging an application

You can debug an application running on the IntelliJ IDEA built-in web server on an external server.

To start debugging

  1. Set the breakpoints in the JavaScript code, as required.
  2. Create a debug configuration of the type Firefox Remote:
    Choose Run | Edit Configuration on the main menu, click the Add New Configuration button /help/img/idea/2017.2/add.png on the toolbar, and select Firefox Remote from the pop-up list.
  3. In the Run/Debug Configuration: Firefox Remote dialog box that opens, type localhost in the Host field. In the Port field, type the port that you specified when you enabled remote debugging in Firefox. The default value is 6000.
  4. Open your application in Firefox. The browser shows 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 /help/img/idea/2017.2/debug.png.
  6. In the dialog box that opens, click OK to allow incoming connection from the browser.
  7. Refresh the application page in the browser: the page shows the results of code execution up to the first breakpoint.
  8. 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, etc.

Example

Suppose you have a simple application that consists of two files: index.html and index.js file, where index.html references index.js. This example shows how you can debug the application when it is running on the IntelliJ IDEA built-in server.

To start debugging

  1. Set the breakpoints in index.js.
  2. Create a FireFox Remote debug configuration, type localhost and 6000 in the Host and Port fields respectively:
    ws_js_debug_ff_run_config.png
  3. Open index.html in the editor, choose Open in browser on the context menu, and then choose Firefox from the list:
    ws_js_debug_ff_open_in_browser.png
    The browser opens showing the application running on the IntelliJ IDEA port (currently 63345):
    ws_js_debug_ff_open_in_browser_breakpoint_not_hit.png
  4. Select the index_firefox_remote configuration from the drop-down list on the toolbar and click the Debug toolbar button /help/img/idea/2017.2/debug.png:
    ws_js_debug_ff_choose_run_config.png
    Click OK in the Incoming Connection dialog box that opens:
    ws_js_debug_ff_incoming_connection.png
    Refresh the application page in the browser.

Last modified: 30 August 2017

See Also