PyCharm 2021.1 Help

Debug JavaScript in Firefox

With PyCharm, you can debug your client-side JavaScript in Firefox, version 36 and later, using the Firefox remote debugging functionality. However it is strongly recommended that you use Chrome or any other browser of the Chrome family for the following reasons:

  • PyCharm does not support source maps during a debugging session in FireFox, which blocks debugging of compressed or machine-generated JavaScript.

  • When debugging in Firefox, you cannot preview the changes to your HTML, CSS, or JavaScript code on the fly - this functionality, known as Live Edit, is supported only in Google Chrome.

You can debug an application running on the PyCharm built-in web server or on an external server.

Before you start

  1. Make sure the JavaScript and TypeScript and JavaScript Debugger required plugins are enabled on the Settings/Preferences | Plugins page, tab Installed, see Managing plugins for details.

  2. Configure the built-in debugger as described in Configuring JavaScript debugger.

    To have the changes you make to your HTML, CSS, or JavaScript code immediately shown in the browser without reloading the page, activate the Live Edit functionality. See Live Edit in HTML, CSS, and JavaScript for details.

Enabling remote debugging in Firefox

  1. Open your Firefox browser, click Open menu on the toolbar, and go to Web Developer | Toggle Tools. The Development Tools pane opens.

  2. On the toolbar of the pane, click Customize Developer Tools, select Settings from the list, and then select the Enable browser chrome and add-on debugging and Enable remote debugging checkboxes under Advanced Settings.

    Selecting the Enable remote debugging and Enable browser chrome add-on debugging checkboxes

Restarting Firefox with the debugger server

  • In PyCharm, open the Terminal tool window Alt+F12 and type <path to Firefox> -start-debugger-server <port number> at the command prompt. Later you will specify this port number in the run configuration. You can set any port number, however it is recommended that you use 6000 and later.

  • For versions 61 and earlier you do not need to restart Firefox.

    Open Firefox, go to Tools | Developer | Developer Toolbar, and type listen <port number> in the console that opens at the bottom of the browser.

    Firefox version 61 and earlier: type Listen 6000

  • In PyCharm, open the Terminal tool window Alt+F12 and type <path to Firefox> --start-debugger-server <port number> at the command prompt. Later you will specify this port number in the run configuration. You can set any port number, however it is recommended that you use 6000 and later.

  • For versions 61 and earlier you do not need to restart Firefox.

    Open Firefox, go to Tools | Developer | Developer Toolbar, and type listen <port number> in the console that opens at the bottom of the browser.

    Firefox version 61 and earlier: type Listen 6000

Debugging your application

  1. Set the breakpoints in the JavaScript code, as required.

  2. Create a debug configuration of the type Firefox Remote: from the main menu, select Run | Edit Configuration, click the Add button on the toolbar and select Firefox Remote from the list.

  3. In the Run/Debug Configuration: Firefox Remote dialog 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 list on the toolbar and click Debug.

  6. In the dialog 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 the program execution, examine it when suspended, view actual HTML DOM, run JavaScript code snippets in the Console, and so on..

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 PyCharm built-in server.

  1. In the Terminal tool window (Alt+F12, type start firefox --start-debugger-server 6000 at the command prompt.

  2. Set the breakpoints in index.js.

  3. Create a FireFox Remote debug configuration, type localhost and 6000 in the Host and Port fields respectively:

    ws_js_debug_ff_run_config.png

  4. Open index.html in the editor, select Open in browser from the context menu, and then select Firefox from the list:

    ws_js_debug_ff_open_in_browser.png
    The browser opens showing the application running on the PyCharm port (currently 63345):
    ws_js_debug_ff_open_in_browser_breakpoint_not_hit.png

  5. From the list on the toolbar, select the index_firefox_remote configuration and click Debug:

    ws_js_debug_ff_choose_run_config.png
    Click OK in the Incoming Connection dialog that opens:
    ws_js_debug_ff_incoming_connection.png
    Refresh the application page in the browser.

Last modified: 26 May 2021
View actual HTML DOM Find unused code with coverage