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 available only in Google Chrome and other browsers of the Chrome family.

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

ActionHotkey
Toggle breakpointCtrl+F8
Resume programF9
Step overF8
Step intoF7
StopCtrl+F2
View breakpoint details/all breakpointsCtrl+Shift+F8
Debug code at caretShift+F9 (within the main method), or Alt+Shift+F9
Last modified: 11 May 2021