明天这篇文章次要是科普一下，因为发现尽管办法简略，然而很多人没有接触过node方面的开发，所以就没有理解过。用node开发次要分两大类吧，一类是做工具，一类是做服务，都是能够调试的，webpack就属于工具类。
一 node调试
讲怎么调试webpack之前，先看最根本node执行js文件的调试。node官网的debugger章节讲的很分明，我再补充一些操作的图。
平时咱们执行一个文件的时候就是 node server.js, 加上一个--inspect或者--inspect-brk 参数就能启动调试了，区别是--inspect-brk会在代码的第一行进行断点停留，我平时都用这个，因为我测试--inspect第一次执行代码断点不会停留。
执行：
node --inspect-brk server.js会看到这样的输入
Debugger listening on ws://127.0.0.1:9229/e27919ae-288d-436c-b06e-c1b9740ef8bd
For help, see: https://nodejs.org/en/docs/inspector这是启用了 V8 查看器，启动了一个ws服务，默认端口9229，加一个动静生成的UUID, 这时须要一个能够连贯该服务的调试客户端，
因为应用了 Chrome 开发者工具协定, 所以能够用chrome的开发者工具进行调试。
关上chrome的开发者工具页面，如果看到node的绿色图标，点击就可进入调试，默认9229端口会显示。
如果没有，在chrome的地址栏输出chrome://inspect/#devices
能够看到如下图所示，Remote Target 中会有你启动调试的文件，点击inspect
如果你是自定义的端口
node --inspect-brk=5000 server.js则点击上图中Discover network targets 右侧的按钮，增加上你启动的端口即可。
二 webpack命令的调试
把握了node的调试，离怎么调试webpack源码就差一个webpack命令的启动文件在哪了。科普一下node怎么写命令行工具，npm包的bin字段指定命令的名字和对应执行的启动文件，例如webpack-cli的package.json
{
"name": "webpack-cli",
"bin": {
"webpack-cli": "./bin/cli.js"
}
}本地装置时，会把启动文件软链接到我的项目的node_modules/.bin目录下，全局装置时会软链接到以后node环境的bin目录下。
所以咱们去我的项目的node_modules/.bin下找到webpack文件，它的首行是这样 #!/usr/bin/env node 意思是用node去执行该文件，所以咱们就在这行的前面增加上调试的参数--inspect-brk即可，剩下步骤就和下面讲的调试node一样了。
#!/usr/bin/env node --inspect-brk
上面咱们就调一下webpack命令，这里还是require了 webpack-cli
webpack-cli中执行webpack办法的中央
webopack中打断点示意
文中demo: https://github.com/yylgit/lia…
好了，上面就开始你的表演吧，纵情在你想要看的中央进行调试吧。
如果感觉有播种请关注微信公众号 前端良文 每周都会分享前端开发中的干货知识点。
发表回复