WebStorm 2021.2 Help

Debug code

During a debugging session, you launch your application or file with the debugger attached to it. The debugger interferes the program execution and provides you with the information on what is happening under the hood. This facilitates the process of detecting and fixing bugs in your program.

With WebStorm, you can debug all kinds of applications written in JavaScript, TypeScript, or Dart: Node.js, React Native and Electron applications and, of course, client-side applications written using different frameworks. In addition to that, you can also debug unit tests and build scripts.

No matter what kind of code you are debugging, your experience with the WebStorm debugger is the same - you just put breakpoints and step through your actual source code even if you then compile it, WebStorm takes care of source maps.

During a debugging session, you can step through the application, examine it when suspended, resume program, evaluate expressions, change values on-the-fly, set watches, and more.

In WebStorm, the JavaScript debugger works out of the box and in most cases its default settings are sufficient. If necessary, you can configure the debugger as described in Configuring JavaScript debugger.

WebStorm supports debugging client-side applications running on the built-in or an external web server. Debugging of %javascript_code% is only supported in Google Chrome and in other Chromium-based browsers.

This section describes the procedures that are common for various types of applications and frameworks. Also find more language- and technology-specific details:

Useful debugger shortcuts

Action

Hotkey

Toggle breakpoint

Ctrl+F8

Resume program

F9

Step over

F8

Step into

F7

Stop

Ctrl+F2

View breakpoint details/all breakpoints

Ctrl+Shift+F8

Debug code at caret

Shift+F9 (within the main method), or Alt+Shift+F9

Last modified: 22 November 2021