The Problem

More and more applications are built with Node.js, and they often throw confusing errors. So I put together a quick reference on how to debug Node.js, Vue CLI, and Webpack plugins.

1. Debugging Node.js

1. Add the --inspect flag to the JS file you want to run for remote debugging (default port is 9229)

node --inspect app.js 

2. Then in Chrome's address bar, type chrome://inspect, and you'll see the screen below.

3. Enter the default debugging port

4. Or click the debug button in DevTools

2. Debugging Vue CLI (main.js)

1. Add a debugger statement in main.js

2. Add the following script to package.json

"debug": "node ./node_modules/@vue/cli-service/bin/vue-cli-service.js serve"

3. Run npm run debug

4. In main.js, press F5

5. Enter the debug URL "localhost:8080"

At this point the breakpoint will hit in main.js

3. Debugging the Webpack Plugin in vue.config

1. Add a debugger statement in the chainWebpack method of vue.config

2. Add the following script to package.json

"debugbuild": "node --inspect-brk=9229 ./node_modules/@vue/cli-service/bin/vue-cli-service.js build" 

3. Type chrome://inspect into the browser address bar > enter the network target port

4. Back in VS Code > run npm run debug in the terminal

5. The breakpoint will now hit inside the chainWebpack function