[JS] – How to debug your NodeJS + webpack application in Intellij IDE or WebStorm?


  • Intellij IDE chrome extension installed.


*Note: If you don’t have this tool installed follow the link below.


Steps to Set Up

  • Set up your server/application as NodeJS
    • Click into `Edit Configurations`
    • + Add new Configuration


  • Choose your Node Interpreter;
  • Add the script which is used to run your application


  • Set the URL for your debug:

Default value for WebPack projects: “http://localhost:63342/<project_name>/build_dir&#8221;


*Note: Build directory is the value defined in the output section in webpack.config.js file.

Example :

output: {
  path: './dist',
  filename: 'bundle.js'
  • Configure to the IDE exclude your build directories.


  • Now you can run it and debug as the following is showing.

Screen Shot 2017-01-17 at 2.22.19 PM.png

Note: Check the source-map defined in the `devtool` section into webpack.config.js file. Check the following link to understand better your options of dev tool. 





Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s