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

Pre-requistes

  • Intellij IDE chrome extension installed.

screen-shot-2017-01-17-at-2-17-37-pm

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

https://www.jetbrains.com/help/webstorm/2016.3/using-jetbrains-chrome-extension.html

Steps to Set Up

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

screen-shot-2017-01-17-at-2-02-47-pm

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

Example:

  • Set the URL for your debug:

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

screen-shot-2017-01-17-at-2-08-54-pm

*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.

screen-shot-2017-01-17-at-2-13-15-pm

  • 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. 

https://webpack.github.io/docs/configuration.html

 

 

 

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s