Webstorm Node.js debugging with Nodemon

I recently switched to the Webstorm IDE, and found that I couldn’t run the debugger when using nodemon to run my project. For those of you who haven’t tried nodemon, it’s a small package that automatically restarts your node project when it detects a file change; allowing for quick debugging.

To run your project with nodemon, simply add its path to the Node parameters in the Edit Configuration section at the top of the screen next to the run button.

Screen Shot 2017-05-06 at 8.54.01 PM.png

If you don’t know where your nodemon package is installed, simply open terminal and type which nodemon. This will return the path; you will need it for the next step.

Now in the Edit Configuations window, add the path to your nodemon install (in my case it was /usr/local/bin/nodemon and it probably is yours too), hit apply, and your project should run using nodemon when you hit the run button.

Screen Shot 2017-05-06 at 8.55.14 PM.png

We still have a problem though. If you try to debug your app while launching from nodemon, Webstorm does not recognize your breakpoints. To fix this, we have to create a new remote debug configuration.

Click add debug configuation (the little + sign on the top left of the edit config window) and navigate down to Node.js Remote Debug.

Screen Shot 2017-05-06 at 9.00.56 PM.png

Name it whatever you would like and add host: local host and port: 3001. It is important that the port is not the same port that your node app is running on as this is a separate process that you will launch after running your app normally.

Screen Shot 2017-05-06 at 9.02.46 PM.png

Hit apply and go back to your regular app configuration from the beginning of the post. Add the flag --debug=3001 on your nodemon Node Parameters that we set up.

Screen Shot 2017-05-06 at 9.04.57 PM.png

To run the project in nodemon debug mode, first run your app.js or equivalent file with the run button and attach the debug process by hitting the drop down and to your newly created Nodemon Debug configuration. Run this process in debug mode simultaneously with your running project and your breakpoints should work. There will be a green dot next to each of the configuration titles if they are currently running and you can stop the debugger independently of the base project.

Screen Shot 2017-05-06 at 9.08.17 PM.png

Hope this helped :)


Now read this

Angular 4 reactive forms retype password on signup (group validation)

Angular 4 was released recently and as a result there aren’t many community answers for this version. I was working on the sign up page for my latest project and I took a few wrong turns when designing the “retype password” field in a... Continue →