让你 nodejs 水平暴增的 debugger 技巧

迈不过友情╰ 2022-10-19 00:59 100阅读 0赞

学习 nodejs 最重要的是什么？可能每个人都有自己的答案。

我觉得学习 nodejs 除了要掌握基础的 api、常用的一些包外，最重要的能力是学会使用 debugger。因为当流程复杂的时候，断点调试能够帮你更好的理清逻辑，有 bug 的时候也能更快的定位问题。

狼叔说过，是否会使用 debugger 是区分一个程序员 nodejs 水平的重要标志。

本文分享一下 debugger 的原理和 vscode debugger 的使用技巧。

## debugger 原理 ##

运行 nodejs 代码的时候，如果带上了 `--inspect`（可以打断点） 或者 `--inspect-brk`（可以打断点，并在首行断住） 的参数，那么就会以 debugger 的模式启动：

![7f795c0aa207f09f871c22b510a6b88a.png][]

可以看到，node 启动了一个 web socket 的 server，地址是：ws://127.0.0.1:9229/78637688-e8e0-4582-80cc-47655f4bff66

**为什么 debugger 要启动一个 websocket server 呢？**

debugger 的含义就是要在某个地方断住，可以单步运行、查看环境中的变量。那么怎么设置断点、怎么把当前上下文的变量暴露出去呢，就是通过启动一个 websocket server，这时候只要启动一个 websocket client 连接上这个 server 就可以调试 nodejs 代码了。

### v8 debug protocol ###

连上之后呢，debugger server 和 debugger client 怎么交流？这就涉及到了 v8 debug protocol。

通过两边都能识别的格式来交流，比如：

在 test.js 的 100 行 设置断点：

{
        "seq":118,
        "type":"request",
        "command":"setbreakpoint",
        "arguments":{
            "type":"script",
            "target":"test.js",
            "line":100
        }
    }

然后查看当前作用域的变量：

{
        "seq":117,
        "type":"request",
        "command":"scope"
    }

执行一个表达式：

{
        "seq":118,
        "type":"request",
        "command":"evaluate",
        "arguments":{
            "expression":"a()"
        }
    }

之后继续运行：

{
        "seq":117,
        "type":"request",
        "command":"continue"
    }

通过这种方式，client 就可以告诉 debugger server 如何执行代码。

![4c006e1c3d593fb0f34d40ac9a068365.png][]

### debugger client ###

debugger client 一般都是有 ui 的（当然，在命令行里面通过命令来调试也可以，但一般不这么做）。常见的 js 的 debugger client 有 chrome devtools 和 vscode debugger 等。

我们写一个简单的 js 脚本，通过 node --inspect-brk 跑起来：

![5ff5b38e8cfddf3b3d99a1818491238e.png][]

可以看到它启动在了 9229 端口，

然后，我们分别通过两种 client 连上它。

#### chrome devtools ####

在 chrome 地址栏输入 chrome://inspect，然后点击 configure 来配置目标端口：

![0f7187f9b208809f7b08c4db45248503.png][]

把刚才的端口 9229 填上去：

![faa3932ab6e661f83695ab9be52d8715.png][]

然后就可以看到 chrome 扫描到了这个 target，点击 inspect 就可以连上这个 debugger server。

![469d8f0f0d94a4646cae244daf3336a6.png][] ![95c6eb58f17230115d8bd81e3ad0749d.png][]

之后就可以设置断点、单步执行、执行表达式、查看作用域变量等，这些功能都是通过 v8 debug protocol 来实现的。

#### vscode debugger ####

在 vscode 里面写代码，在 chrome devtools 里调试比较麻烦，vscode 也实现了 debugger 的支持，可以直接用 vscode 来调试。

使用vscode 调试能力的方式是修改项目根目录下的 .vscode/launch.json 配置。

##### attach #####

点击右下角的按钮来添加一个配置项。这里选择 nodejs 的 attach：

![c0cc1eee559a44c6978ad4a151631ea6.png][]

因为已经通过 node --inspect-brk 启动了 websocket 的 debugger server，那么只需要启动 websocket client，然后 attach 上 9229 端口就行。

![22d29b320f9ad05fe0a0d695dadf6c27.png][]

点击左侧的按钮，就可以连上 debugger server 开始调试：

![cfef8a6b6953caf0167a5f69d4f5f98b.png][]

##### launch #####

这样先通过 node --inspect-brk 启动 debugger server，然后再添加 vscode debug 配置来连接上太麻烦了，能不能把这两步合并呢？

当然可以，只要添加一个 launch 的配置：

![a3073828db38a3d9a2f189788a0bf14b.png][] ![bb3cb5c5227ecd4858796057e751f2ea.png][]

这里的 type 是 launch，就是启动 debgger server 并且启动一个 debugger client 连接上该 server。运行的程序是根目录下的 index2.js，还可以设置 stopOnEntry 来在首行断住。

点击调试，就可以看到能够成功的调试该 js 文件。

![4de2c5f1ec72fb66488d3b8ff145f754.png][]

vscode 会启动 debugger server，然后启动 debugger client 自动连接上该 server，这些都不需要我们去关心。

这样我们就可以成功的使用 vscode debugger 来调试 nodejs 代码。

## vscode debugger 进阶 ##

debugger client 中我们最常用的还是 vscode，这里着重讲一下 vscode debugger 的各种场景下的配置。

### sourcemap ###

如果调试 ts 代码，肯定不能调试编译后的代码，要能够映射回源码，这个是 sourcemap 做的事情。调试工具都支持 sourcemap，比如 chrome devtools 和 vscode debugger，都支持文件末尾的 sourcemap url 的解析：

//# sourceMappingURL=index.js.map

这样当调试 index.js的时候，如果它是 ts 编译的出来的，就会自动找到对应的 ts。

当然，如果调试配置里面直接指定了 ts，那么要能够调试需要再配置 outFiles，告诉 vscode 去哪里找 sourcemap。

![5aacd832f20e13e4f195ddce6a6af3d6.png][] image.png

这样，在 ts 源码中打的断点和在编译出的 js 打的断点都能生效。

### 多进程调试 ###

当代码中有子进程的时候，就有了第二条控制流，需要再启动一个 debugger。

比如 vscode，它是基于 electron，需要启动一个主进程，一些渲染进程。主进程是通过 launch 启动的，而渲染进程则是后来 attach 的。

主进程启动的时候，通过 --remote-debugging-port 来指定子进程自动的时候的 debugger server 的端口。

![1a53471cfbdb96d9e87be20889811082.png][]

outFiles 来指定 sourcemap 的位置，这样才可以直接调试 ts 源码。runtimeExecutable 是用 vscode 的运行时替代掉了 nodejs（一般不需要设置）。

然后渲染进程是后面启动的，我们通过参数配置了会启动在 9222 端口，那么只要 attach 到那个端口就可以调试该进程了。

![f28282cd447a09b04143ca6f30c81b88.png][]

vscode 支持多 target 调试，也就是可以在 vscode 里面同时启动 多个 debugger。可以切换不同的 debugger 来调试不同的进程。

![642cf4322d27917a9861f08c65d5c225.png][]

## 总结 ##

debugger 的使用是一项很重要的能力，对于 nodejs 水平的提升很有帮助。

nodejs debugger 的原理是 js 引擎会启动 debugger server（websocket），等待客户端连接，我们可以通过各种 debugger client 连上来进行调试，比如 chrome devtools、vscode debugger。

调试 nodejs 代码更多还是使用 vscode debugger（当然有的时候也会使用 chrome devtools 调试，基于 chrome devtools 的 memory 来进行内存分析，定位内存泄漏问题的时候很有帮助）。

vscode debugger 的使用主要是在 .vscode/launch.json 里面添加调试配置。

调试配置分为 launch 和 attach 两种：

*  launch 会启动 debugger server 并用 debugger client 连接上
 *  attach 只是启动 debugger client 连接上已有的 debugger server，所以要指定端口

具体的配置项常用的有：

*  outFiles 指定 sourcemap 的位置，用来调试 ts 源码等需要编译的代码
 *  stopOnEntry 在首行停住
 *  args 来指定一些命令行参数
 *  runtimeExecutable 当运行时不是 nodejs 的时候需要指定，比如 vscode 或者其他的一些运行时

基于这些配置我们就可以调试各种场景下的 nodejs 代码，需要编译的，或者多个进程的。

**不夸张地说，如果你熟悉了 debugger 的使用，理解各种 nodejs 代码都会简单很多。**希望这篇文章能够帮助大家了解 debugger 的原理，并且能够使用 chrome devtools 或者 vscode debugger 来调试 nodejs 代码。知道有 sourcemap 以及多进程的情况下都怎么调试。

[![90e541fcc8778e09ab26c8ad5c5d2461.png][]][90e541fcc8778e09ab26c8ad5c5d2461.png 1]

## 关于奇舞团 ##

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

![d6ed2719ba4ed079e05bc451709e55e2.png][]

[7f795c0aa207f09f871c22b510a6b88a.png]: /images/20221005/b5f2cd6b19c642009b6cfdaab1dabf6a.png
[4c006e1c3d593fb0f34d40ac9a068365.png]: /images/20221005/8c5f29d9195d43ed9486f462550dd28f.png
[5ff5b38e8cfddf3b3d99a1818491238e.png]: /images/20221005/b2e9f196e77a4c6293dcaf1614452f69.png
[0f7187f9b208809f7b08c4db45248503.png]: /images/20221005/b68a921c391846c595227f5b1a960daa.png
[faa3932ab6e661f83695ab9be52d8715.png]: /images/20221005/2d60ac87e3674a2b9f25ea4997b7e88b.png
[469d8f0f0d94a4646cae244daf3336a6.png]: https://img-blog.csdnimg.cn/img_convert/469d8f0f0d94a4646cae244daf3336a6.png
[95c6eb58f17230115d8bd81e3ad0749d.png]: /images/20221005/4130e62f910d4156bd53eec6cb7eb6f5.png
[c0cc1eee559a44c6978ad4a151631ea6.png]: /images/20221005/befd29c10df94bc58c3a81709fef2f9e.png
[22d29b320f9ad05fe0a0d695dadf6c27.png]: /images/20221005/4b7c71ed5cc547ef8c54d1fe7184a0f6.png
[cfef8a6b6953caf0167a5f69d4f5f98b.png]: /images/20221005/b5d3eb0b441143fba962aa54ba237689.png
[a3073828db38a3d9a2f189788a0bf14b.png]: https://img-blog.csdnimg.cn/img_convert/a3073828db38a3d9a2f189788a0bf14b.png
[bb3cb5c5227ecd4858796057e751f2ea.png]: /images/20221005/c176622ef6d6425abb661b0cd35b63f7.png
[4de2c5f1ec72fb66488d3b8ff145f754.png]: /images/20221005/e8c80f2950aa4aa1ad64140152c1c893.png
[5aacd832f20e13e4f195ddce6a6af3d6.png]: /images/20221005/c0b70fb3addf489ab3a7f851e92230c3.png
[1a53471cfbdb96d9e87be20889811082.png]: /images/20221005/a654fa692ae44bc28cb5c8738ec006ac.png
[f28282cd447a09b04143ca6f30c81b88.png]: /images/20221005/a4871c205c4042fe9e6b121fdc269e2b.png
[642cf4322d27917a9861f08c65d5c225.png]: /images/20221005/d40713516a294c77aa4a15fe6498ebf1.png
[90e541fcc8778e09ab26c8ad5c5d2461.png]: /images/20221005/a8bf5f8cce5841e4b836b8bf990ba268.png
[90e541fcc8778e09ab26c8ad5c5d2461.png 1]: http://mp.weixin.qq.com/s?__biz=Mzg4MTYwMzY1Mw%3D%3D&chksm=cf61d698f8165f8e2b7f6cf4a638347c3b55b035e6c2095e477b217723cce34acbbe943ad537&idx=1&mid=2247496626&scene=21&sn=699dc2b117d43674b9e80a616199d5b6#wechat_redirect
[d6ed2719ba4ed079e05bc451709e55e2.png]: /images/20221005/e003a59aab93450badc4293ac6abee6b.png