使用WebStorm使用来自单独客户端应用程序的调用进行Node Express App调试

Question

I've looked around and had a lot of trouble figuring this out. I'm hoping someone might be able to point me to a post or have information on how to do this.

My problem is that I have 2 projects I've made using WebStorm:

• I have 1 application that is my server-side code running on port 3000. It's a simple Node Express app.
• The second application is an Angular 4 / Ionic 3 application running the client side on port 8100.

I want to run my server application in debug mode, so that it hits the breakpoints for all the data being sent from the client side app.

For example: Angular / Ionic app sends a get request for all clients for a given customer. The customer is sent via url parameter. I want the server code to pause when it receives this request and so I can see this URL parameter. Fairly simple.

The server is also using grunt to build the project, and nodemon to watch it. I'm using some npm scripts to make life easy. Here are the scripts:

"scripts": {
  "dev": "SET NODE_ENV=development && nodemon ./bin/www",
  "grunt": "grunt",
  "start": "node ./bin/www"
},

Nothing fancy.

I have WebStorm configured to run my scripts from hitting play. So the play button will first run the following sequence:

1. npm run grunt
2. npm run dev

Again ... nothing fancy.

Now how do I get this thing to setup a debugger so I can listen in WebStorm? I have a both projects open in separate windows, and I am initiating the calls to the server from the client. How do I make the break points grab hold and show me the data coming into the server?

I feel like this is incredibly easy and I'm missing something really stupid. Any help would be much appreciated.

Answer 1

You need starting you server in debugger to get breakpoints in your server code hit. If you prefer to start your app via npm script, you have to add $NODE_DEBUG_OPTION (or %NODE_DEBUG_OPTION% on Windows) to make sure that Node.js is started with appropriate debug options ( --debug-brk , --inspect-brk , etc)

So:

• in package.json, modify your dev script as follows:

"dev": "SET NODE_ENV=development && nodemon %NODE_DEBUG_OPTION% ./bin/www"

• right-click your package.json, choose Show npm scripts
• right-click dev script in npm tool window that opens, choose edit 'dev' settings to create a run configuration.
• open your source files in editor, add breakpoints
• press Debug to start debugging
• run your client app, initiate the calls to the server