You can debug an application running on the PyCharm built-in web server or on an external server.
To enable remote debugging in Firefox
Open your Firefox browser, then open .
In the Development Tools pane that opens, click Toolbox Options on the toolbar, and select the Enable remote debugging checkbox under Advanced Settings.
Choose. In the console that opens at the bottom of the browser, type
listen <port number>. 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.
To debug an application
Create a debug configuration of the type Firefox Remote:
Choose from the main menu, click on the toolbar and select Firefox Remote from the pop-up list.
In the Run/Debug Configuration: Firefox Remote dialog box that opens, type
localhostin the Host field. In the Port field, type the port that you specified when you enabled remote debugging in Firefox. The default value is
Open your application in Firefox. The browser shows the application after the code execution, that is, the breakpoints you set have no effect yet.
Choose the newly created configuration in the Select run/debug configuration drop-down list on the toolbar and click Debug .
In the dialog that opens, click OK to allow incoming connection from the browser.
Refresh the application page in the browser: the page shows the results of code execution up to the first breakpoint.
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.
To start debugging
Set the breakpoints in index.js.
Create a FireFox Remote debug configuration, type
6000in the Host and Port fields respectively:
Open index.html in the editor, choose Open in browser on the context menu, and then choose Firefox from the list: The browser opens showing the application running on the PyCharm port (currently
Select the index_firefox_remote configuration from the drop-down list on the toolbar and click Debug : Click OK in the Incoming Connection dialog that opens: Refresh the application page in the browser.