关于javascript:如何调试webpack源码

5次阅读

共计 1414 个字符,预计需要花费 4 分钟才能阅读完成。

明天这篇文章次要是科普一下,因为发现尽管办法简略,然而很多人没有接触过 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-clipackage.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…

好了,上面就开始你的表演吧,纵情在你想要看的中央进行调试吧。

如果感觉有播种请关注微信公众号 前端良文 每周都会分享前端开发中的干货知识点。

正文完
 0