webpack开发调试工具-- node-nightly

工具 node-nightly

• 全局安装 npm install --global node-nightly

• 执行一次命令 node-nightly

• node 执行文件时带上--inspect 标记，例如: node --inspect mian.js

• 一般用--inspect-brk代替--inspect 标记,会在程序第一行代码处自动断点。

• 打开 chrome://inspect/#devices
  

• 点击蓝色inspect就会跳到正常网页开发断点的sources页面，进行断点。

• 可以在package.json的scripts 添加 "debugger": "node --inspect-brk build/build.js",执行命令npm run debugger

• 如果你有多个配置文件，你可以通过 --config webpack.prod.js 指定你想要调试的配置。例如: node --inspect --inspect-brk node_modules/webpack/bin/webpack --config ./webpack.prod.config.js

• node --inspect-brk node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --progress --mode development --config ./build/webpack.dev.conf.js

• vuecli3 中： node --inspect-brk node_modules/@vue/cli-service/bin/vue-cli-service.js serve
  注意： 进行webpack开发时需要将webpack 升级到"webpack": "4.3.0"或以上。