How to do it...

Let's perform the following steps to set up debugging for our Express application with Jetbrain's WebStorm IDE:

  1. First, we will update our NPM debug script in our project's package.json configuration. This time, we will simply add a $NODE_DEBUG_OPTION placeholder to our configuration. This placeholder will be populated by WebStorm based on its own Debug configuration when it launches the process:
{
...
"scripts": {
"clean": "rimraf ./dist",
"start": "node $NODE_DEBUG_OPTION ./dist/express.bundle.js",
"debug": "DEBUG=express* node $NODE_DEBUG_OPTION ./dist/express.bundle.js",
"build": "webpack",
"watch": "npm-run-all clean build --parallel watch:server watch:build --print-label",
"watch:build": "webpack --watch",
"watch:server": "nodemon ./dist/express.bundle.js --watch ./dist --on-change-only"
},
...
}
  1. Next, we will need to create a Configuration for debugging our application. Click on the drop-down arrow beside the play and bug icons in the top-right corner of WebStorm. From there, select Edit Configurations...:
  1. In the Edit Configurations dialog, create a new configuration by clicking on the + icon in the top-left corner of the dialog, and choose npm as the configuration type. Name this configuration Debug App and provide with it the path to your package.json, the run command, the debug script, and copies of any of your environment variables that need to be passed to your application. Then, click on OK to close the dialog:
  1. Now that our debug process is configured, we can start adding some breakpoints to the application we want to debug. Let's add two breakpoints at line 11 and 13, by clicking in the gutter region between the line number and the source code. This will add a red dot that indicates an active breakpoint:
  1. To run our debugger, we will simply click on the green bug icon in the top right of WebStorm with our Debug App process selected in the dropdown. The application will start up and immediately pause its execution at the start of our express application's WebPack bundle. Click on the green arrow Continue button in the bottom left side of the WebStorm debugger panel to have the application process run until it hits our first WebStorm defined breakpoint at line 11:
  1. Clicking on continue again will move the debugger forward to line 25 where we left our debugger line. Pressing it again after that will resolve it in line 13 after Mongoose connects. Whenever the debugger pauses at a breakpoint, the variables section and the source code itself will intelligently display previews of values and state as they currently exist in the code. Hovering over elements can provide even more details about the state of expressions.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.227.46.29