JetBrains Rider
 
2023.3
Shortcuts: Visual Studio 2022 (Windows)
Get JetBrains Rider
Get your hands on the new features ahead of the release by joining the Early Access Program for Rider 2025.1! Learn more
Upcoming webinar
Uno Platform & Hot Design for Rider
March 11, 2025 at 03:00 PM
  1. Languages and frameworks
  2. Node.js
  3. Running and debugging Node.js
  4. Debugging the server- and the client-side code

Debugging the server- and the client-side code

Last modified: 21 March 2024

Required plugins:

Javascript and TypeScript, JavaScript Debugger, Node.js  -  The plugins are bundled with JetBrains Rider and enabled by default.

note

Debugging of JavaScript client-side code is only supported in Google Chrome and in other Chromium-based browsers.

With JetBrains Rider, you can debug the server-side code of a Node.js application together with its client-side JavaScript code. To do that, you need to create a separate JavaScript Debug configuration in addition to the Node.js configuration and run these two configurations together. You can do that in two ways:

  • Create a JavaScript Debug configuration from the Edit Configurations dialog (Run | Edit Configurations) and then click the Run toolbar button to start it. For more information, refer to Debugging an application running on an external web server.

  • Create a JavaScript Debug configuration from the Live Edit tab when creating or editing a Node.js configuration. In this case, the JavaScript Debug configuration will start automatically every time you start the Node.js configuration.

Create a JavaScript Debug configuration from the Node.js configuration

  1. Go to Run | Edit Configurations. Alternatively, select Edit Configurations from the list on the toolbar.

    Open the Edit Configurations dialog

  2. From the list, select the Node.js run configuration to start together with a JavaScript Debug configuration. In the dialog that opens, switch to the Browser / Live Edit tab.

  3. Select After launch to start a browser automatically when you launch a debugging session.

  4. In the field below, type the URL address to open the application at.

  5. Choose the browser to use from the list next to the After launch checkbox.

    • To use the system default browser, select Default.

    • To use a custom browser, select it from the list. Note that debugging of JavaScript client-side code is only supported in Google Chrome and in other Chromium-based browsers.

    • To configure browsers, click the Browse button and adjust the settings in the Web Browsers and Preview dialog that opens. For more information, refer to Configure browsers.

  6. Select the With JavaScript debugger checkbox.