The debugger is one of the most essential features of WebStorm.
One of the main benefits of using a debugger inside the IDE is that you put the breakpoints and step through your actual source code (even if you then compile it. Thank you, source maps!). If you want to edit the code or quickly navigate to the usages or definitions of methods while debugging, you don’t need to switch back to the editor.
And no matter what kind of code you debug, your experience with the debugger will be the same.
To see how the debugger works in WebStorm, we’ll try to debug a simple Express Node.js application. We’ll start with creating a new run/debug configuration. Then we’ll put in some breakpoints, see what’s going on in the Debugger’s Variables view, step through the code, evaluate expressions and use the interactive console.
Prepare for debugging: create a run/debug configuration
Run/debug configuration is an entry point to, as the name suggests, running and debugging apps in WebStorm.
To debug different types of apps and files, you need to use different types of run/debug configurations.
Depending on the type, the information you need to provide in the configuration varies.
For example, in the Node.js configuration, you need to specify a file that needs to be run. In the test configuration you can select between the name of a suite, test or a test file. Some configurations attach to the already started app, in this case, you need to specify the URL and port to attach to.
To create a run/debug configuration:
- Click on the drop-down menu in the top right corner of WebStorm and select Edit configurations…
- Click on the + icon and select the configuration type: we select Node.js.
- Add the missing information about the debug environment: we need to specify the main file that runs our app.
- Name and save the configuration
All the created configurations are saved in the workspace.xml file in the .idea folder in the root of your project so that you can reuse them next time you open this project.
If you want to share your configuration with your team, check the Share checkbox in the configuration and then commit the .idea/runConfigurations folder to the version control.
Once we have our configuration ready, select it in the drop-down list and hit the green debug icon (the one with the bug on it).