Skip to content

Latest commit

 

History

History

debug-webpack

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 

Debug Webpack

You can debug webpack configuration using nodejs debug tool:

  • Open terminal and run node --inspect-brk node_modules/webpack/bin/webpack.js.
  • --inspect-brk will pause your app execution at line 1.
  • You'll see a message like Debugger listening on ws://127.0.0.1:9229/0f2c936f-b1cd-4ac9-aab3-f63b0f33d55e.
  • Now you have to attach the debugger.

Attach debugger in Chrome:

  • Open Chrome browser.
  • Type about:inspect in url bar and enter.
  • Click on Open dedicated DevTools for Node.
  • You may need to wait a bit before the debugger is attached.
  • Now in the terminal you'll see a new message Debugger attached.
  • App is paused at first line, click Resume script execution to run it and see the logs.

Attach debugger in VSCode:

  • Open debug tab in VSCode.
  • Click on open lunch.json.
  • Click on "Add Configuration" button in the bottom left corner.
  • Choose "nodejs:attach" configuration.
  • You can also use debug menu or command palette to add the same settings as above.
  • From debug tab select your configuration (Attach) and click the green play button.
  • You may need to wait a bit before the debugger is attached.
  • In the terminal you'll see a new message Debugger attached.
  • App is paused at first line, click Continue to run it and see the logs.