WebStorm 2024.1 Help

Start the debugger session

Any debugger session is based on a run/debug configuration. The configuration type depends on the type of your application and the runtime environment.

You can run several debugger sessions with different configurations at a time.

Through a configuration you do not only launch your application but can also tell WebStorm to use some parameters or perform some actions before the application starts. For example, you can pass Node.js-specific command line options to the Node.js executable file.

Before debugging

  1. Set the breakpoints in your code.

  2. Define a run/debug configuration.

  3. To debug code compiled to JavaScript, 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.

    Source maps are required for debugging TypeScript, Dart, CoffeeScript, JavaScript with JSX, ES6 and newer versions etc.

Start debugging

Note that after you launch a debugger session, the the Debug tool window button icon that marks the Debug Tool Window toggles to Debugging is active to indicate that the debugging process is active.

Pause/Resume a debugger session

When the debugger session is running, you can pause/resume it as required using the buttons on the toolbar of the Debug tool window:

  • To pause a debugger session, click the Pause button.

  • To resume a debugger session, click the Resume button F9.

Restart a debugger session

  • Click the Rerun button in the Debug tool window or press Ctrl+F5.

    the Rerun button

Reload the current page in browser

When debugging a simple HTML+JavaScript application on the WebStorm built-in server, you can reload the page where you have currently navigated instead of restarting the application entirely.

Terminate a debugger session

  • Click the Stop button in the Debug tool window.

    the Stop button

    Alternatively, press Ctrl+F2 and select the process to terminate (if there are two or more of them).

    the Stop button: select the configuration to terminate

Productivity tips

Debug non-responding applications

In case your application hung, pause the session to let the debugger get the information about its current state. You can then examine the program state and locate the cause of the problem.

Do more with pause

When you need to evaluate an expression, and WebStorm doesn't let you do that because you didn't stop at a breakpoint, you can advance your program a line further by stepping. After this, you will be able to use the debugger as if you had stopped at a breakpoint. While in some cases this may not be a valid solution, it may sometimes help you out.

Run before-launch tasks

Configure running external tools or performing other actions before every debugging session. This before-launch task can be running a Gulp or Grunt task or an NPM script, compiling your TypeScript code into JavaScript or running all the currently active File Watchers to compile or compress your code, uploading your sources to a remote server, and many more, depending on the language and frameworks you are using.

Last modified: 09 May 2024