Debug JavaScript in Chrome
note
Debugging of JavaScript code is only supported in Google Chrome and in other Chromium-based browsers.
tip
By default, a debugging session starts in a new window with a custom Chrome user data. To open a new Chrome instance with your familiar look-and-feel, configure Chrome in JetBrains Rider to start with your user data. For more information, refer to Starting a debugging session with your default Chrome user data.
To restart the new run/debug configuration, select it from the list and click 
.
Besides restarting your application by clicking the Rerun button (
) in the Debug tool window, you can also use the Reload in Browser action to reload the page where you have currently navigated. This works the same way as the Reload Page functionality (Ctrl0H) in Chrome.
To reload the current page, click
on the toolbar and select Reload in Browser (
).
During a debugging session, clicking the Rerun button () reloads the home.html page with the Submit button. Clicking the Reload in Browser button (
) reloads the calculator.html page so all the previous script output is cleared and the debugger returns to line 1 in Calculator.js.
Set the breakpoints in your code.
Start the application in the development mode, for example, using an npm script.
The Run tool window or the Terminal shows the URL at which your application is running. Hold CtrlShift and click this URL link. JetBrains Rider starts a debugging session with an automatically generated configuration of the type JavaScript Debug.
If you launched your application in the development mode from the New Terminal, you can just click the Start debugging in browser button next to the link.
note
The button is not available from the New Terminal in the WSL.
Set the breakpoints in the JavaScript code, as required.
Create a run/debug configuration of the JavaScript Debug type:
Go to , then in the Edit Configurations dialog, in the Edit Configurations dialog that opens, click the Add button (
) on the toolbar and select JavaScript Debug from the list. In the Run/Debug Configuration: JavaScript Debug dialog that opens, specify the URL address at which the application is running. This URL address should be a concatenation of the Web server root URL and the path to the HTML file relative to the web server document root in accordance with server access configuration. For more information, refer to Connect to a web server.
Click OK to save the configuration settings.
Choose the newly created configuration in the Select run/debug configuration list on the toolbar and click the Debug button
. The HTML file specified in the run configuration opens in the chosen browser and the Debug tool window appears.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.
tip
By default, a debugging session starts in a new window with a custom Chrome user data. To open a new Chrome instance with your familiar look-and-feel, configure Chrome in JetBrains Rider to start with your user data. For more information, refer to Starting a debugging session with your default Chrome user data.
Let's now deploy our simple application to a local web server . In the following example, it is Apache:
When using a local web server, such as Nginx or Apache, as in our example, or the web server is on a remote host, you need to create a Run/Debug configuration to start the JavaScript debugger. To do that, click the list at the upper right-hand corner of the JetBrains Rider window and choose Edit Configurations. Alternatively, choose from the main menu:
In the Run/Debug Configurations dialog, click
and choose JavaScript Debug from the list:
Specify the URL of your running application, in our example it is
http://localhost:8888/MySimpleApp/index.html
In our example, the local project structure and the file structure on the server are the same so no mappings are required.
Now we can start debugging: choose the new run/debug configuration from the list in the upper right-hand corner of the JetBrains Rider window, and then click
:
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.
Start creating a run/debug configuration as described above.
In the Run/Debug Configurations dialog, click
in the Remote URLs of local files area.In the dialog that opens, select the src folder under MySimpleApp.
In the Remote URL field, type the URL address of the application, in our example it is
http://localhost:8888/MySimpleApp
Save the run/debug configuration and launch it as described above.
Set the breakpoints in the Workers to debug.
If you are using Service Workers, make sure the Allow unsigned requests checkbox is selected on the Debugger page (). Otherwise your service workers may be unavailable during a debug session.
Create a debug configuration of the type JavaScript Debug as described above in Debugging client-side JavaScript running on an external web server.
From the Run widget list on the toolbar, select the newly created configuration and click
next to it. The HTML file specified in the run configuration opens in the browser and the Debug tool window opens with the Frames list showing all the available Workers:
To examine the data (variables, watches, and so on) for a Worker, select its thread in the list and view its data in the Variables and Watches panes. When you select another Worker, the contents of the panes are updated accordingly.
Go to . Alternatively, select Edit Configurations from the Run widget on the toolbar.
In the Edit Configurations dialog that opens, click the Add button (
) on the toolbar and select Attach to Node.js/Chrome from the list. 
The Run/Debug Configuration: Attach to Node.js/Chrome dialog opens.
Specify the configuration name and accept the predefined host and port values
localhost:9229.note
If you specify a custom port, make sure you specify it later when running Chrome from the command line.
Click Apply and OK to save the configuration and leave the dialog.
Set the breakpoints where necessary.
From the Run widget list on the toolbar, select the newly created Attach to Node.js/Chrome configuration and click
next to it. 
The Debug tool window opens.
Go to the Chrome tab where your extension is loaded.
Switch to JetBrains Rider. In the Debug tool window, step through the breakpoints, switch between frames, change values on-the-fly, examine a suspended program, evaluate expressions, and set watches.