1. Language and framework-specific guidelines
  2. JavaScript
  3. Debug JavaScript in Chrome

Debug JavaScript in Chrome

Last modified: 25 July 2022

Required plugins: Javascript and TypeScript, JavaScript Debugger

The plugins are bundled with CLion and enabled by default.

CLion provides a built-in debugger for your client-side JavaScript code.

note

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

Before you start

Debug an application that is running on the built-in server

CLion has a built-in web server that can be used to preview and debug your application. This server is always running and does not require any manual configuration. All the project files are served on the built-in server with the root URL http://localhost:<built-in server port>/<project root>, with respect to the project structure.

Start debugging

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

  2. Open the HTML file that references the JavaScript to debug or select the HTML file in the Project tool window.

  3. From the context menu of the editor or the selection, choose Debug <HTML_file_name>. CLion generates a debug configuration and starts a debugging session through it. The file opens in the browser, and the Debug tool window appears.

    tip

    To save the automatically generated configuration for further re-use, choose Save <HTML_file_name> from the context menu after the debugging session is over.

  4. 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 an index.html file and an index.js file, where index.html references index.js. To start debugging this application using the built-in server, open index.html in the editor and choose Debug 'index.html' from the context menu:

ws_quick_start_debug_built_in_server_1.png

CLion creates a run/debug configuration automatically, and a debugging session starts:

ws_quick_start_debug_built_in_server_2.png

To restart the new run/debug configuration, click the Debug button in the upper right-hand corner of the CLion window or choose Run | Debug from the main menu:

ws_quick_start_debug_built_in_server_3.png

Reload the current page in browser

Besides restarting your application by clicking the Rerun button in the Debug tool window, you can also click the Reload in Browser to reload the page where you have currently navigated. This works the same way as the Reload Page functionality (Ctrl+R) in Chrome.

The example below shows a simple application that consists of two HTML pages and a JavaScript script. The starting home.html page has a Submit button on pressing which the calculator.html page opens with the results of the Calculator.js script execution.

During a debugging session, clicking the Rerun button would reload 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.

https://resources.jetbrains.com/help/img/idea/2022.1/ws_js_debug_reload_in_browser.png
Gif

Debug an application that is running on the localhost in the development mode

If your application is running in the development mode on localhost, you can start debugging it from the built-in Terminal (Alt+F12), from the Run tool window, or from the Debug tool window. Just hold Ctrl+Shift and click the URL at which the application is running.

https://resources.jetbrains.com/help/img/idea/2022.1/ws_js_start_debugging_from_run_tool_window_light.png
Gif

Debug an application that is running on an external web server

Often you may want to debug client-side JavaScript of an application that is running on an external development web server, for example powered by Node.js.

See Debugging React Applications and Debugging Angular Applications for examples.

Debug asynchronous code

CLion supports debugging asynchronous client-side JavaScript code. CLion recognizes breakpoints inside asynchronous code, stops at them, and lets you step into such code. As soon as a breakpoint inside an asynchronous function is hit or you step into asynchronous code, a new element Async call from <caller> is added in the Frames pane of the Debugger tab. CLion displays a full call stack, including the caller and the entire way to the beginning of the asynchronous actions.

The image below shows an example of a JavaScript debugging session.

Debugging asynchronous JavaScript code

The debugger stops at line3(breakpoint), then at line5(breakpoint). On clicking Step into, the debugger will stop at line5 (on function), then will move to line6.

The asynchronous debugging mode is turned on by default. To disable asynchronous stack traces, set js.debugger.async.call.stack.depth in Registry to 0.

Debug workers

CLion supports debugging Service Workers and Web Workers. CLion recognizes breakpoints in each worker and shows the debug data for it as a separate thread in the Frames pane on the Debugger tab of the Debug tool window.

Note that CLion can debug only dedicated workers, debugging for shared workers is currently not supported.

See also

Procedures

Reference