RubyMine
 
2022.2
Shortcuts: Windows
Get RubyMine
You are viewing the documentation for an earlier version of RubyMine.
  1. Languages
  2. JavaScript
  3. Debug JavaScript in Chrome

Debug JavaScript in Chrome

Last modified: 09 August 2022

Required plugins: Javascript and TypeScript, JavaScript Debugger

The plugins are bundled with RubyMine and enabled by default.

RubyMine 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.

The video and the instructions below walk you through the basic steps to get started with this debugger.

Before you start

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

RubyMine 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>. RubyMine 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. .

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 RubyMine to start with your user data, see Starting a debugging session with your default Chrome user data for details.

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

RubyMine 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 RubyMine 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.2/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.2/ws_js_start_debugging_from_run_tool_window_light.png
Gif

This also works for debugging Vue.js, Angular, React, and Node.js applications.

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

RubyMine supports debugging asynchronous client-side JavaScript code. RubyMine 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. RubyMine 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

RubyMine supports debugging Service Workers and Web Workers. RubyMine 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 RubyMine can debug only dedicated workers, debugging for shared workers is currently not supported.

See also

Procedures