Debugging

During a debugging session, you launch your application, class, 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.

The JavaScript debugging functionality is incorporated in WebStorm, you only need to configure its settings.

WebStorm supports debugging applications running on the built-in or an external web server. Debugging can be performed only using Google Chrome and other browsers of the Chrome family.

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

• Debugging JavaScript in Chrome
• Running and Debugging Node.js
• Running and debugging a React application
• Running and debugging a React Native application
• Running and debugging TypeScript
• Running and debugging an Angular application
• Running and debugging Dart command-line applications
• Running and debugging Dart web applications

Start a debug session

1. Configure the debugger.

2. To debug CoffeeScript, TypeScript, and Dart code, you need to generate a source map for it. This will set the correspondence between lines in your original code and in the generated JavaScript code. If no source map is generated, your breakpoints will not be recognized and processed correctly.

3. Define a run/debug configuration for the application to be debugged.

4. Create breakpoints.

5. Click the Debug <configuration_name> button.

After you've started a debug session, the icon that marks the Debug tool window toggles to to indicate that the debug process is active.

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