[[409644]]

本文轉(zhuǎn)載自微信公眾號(hào)「神光的編程秘籍」，作者神說要有光zxg。轉(zhuǎn)載本文請聯(lián)系神光的編程秘籍公眾號(hào)。

學(xué)習(xí) nodejs 最重要的是什么?可能每個(gè)人都有自己的答案。

我覺得學(xué)習(xí) nodejs 除了要掌握基礎(chǔ)的 api、常用的一些包外，最重要的能力是學(xué)會(huì)使用 debugger。因?yàn)楫?dāng)流程復(fù)雜的時(shí)候，斷點(diǎn)調(diào)試能夠幫你更好的理清邏輯，有 bug 的時(shí)候也能更快的定位問題。

狼叔說過，是否會(huì)使用 debugger 是區(qū)分一個(gè)程序員 nodejs 水平的重要標(biāo)志。

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

debugger 原理

運(yùn)行 nodejs 代碼的時(shí)候，如果帶上了 --inspect(可以打斷點(diǎn)) 或者 --inspect-brk(可以打斷點(diǎn)，并在首行斷住) 的參數(shù)，那么就會(huì)以 debugger 的模式啟動(dòng)：

可以看到，node 啟動(dòng)了一個(gè) web socket 的 server，地址是：ws://127.0.0.1:9229/78637688-e8e0-4582-80cc-47655f4bff66

為什么 debugger 要啟動(dòng)一個(gè) websocket server 呢?

debugger 的含義就是要在某個(gè)地方斷住，可以單步運(yùn)行、查看環(huán)境中的變量。那么怎么設(shè)置斷點(diǎn)、怎么把當(dāng)前上下文的變量暴露出去呢，就是通過啟動(dòng)一個(gè) websocket server，這時(shí)候只要啟動(dòng)一個(gè) websocket client 連接上這個(gè) server 就可以調(diào)試 nodejs 代碼了。

v8 debug protocol

連上之后呢，debugger server 和 debugger client 怎么交流?這就涉及到了 v8 debug protocol。

通過兩邊都能識(shí)別的格式來交流，比如：

在 test.js 的 100 行 設(shè)置斷點(diǎn)：

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

然后查看當(dāng)前作用域的變量：

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

執(zhí)行一個(gè)表達(dá)式：

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

之后繼續(xù)運(yùn)行：

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

通過這種方式，client 就可以告訴 debugger server 如何執(zhí)行代碼。

debugger client

debugger client 一般都是有 ui 的(當(dāng)然，在命令行里面通過命令來調(diào)試也可以，但一般不這么做)。常見的 js 的 debugger client 有 chrome devtools 和 vscode debugger 等。

我們寫一個(gè)簡單的 js 腳本，通過 node --inspect-brk 跑起來：

可以看到它啟動(dòng)在了 9229 端口，

然后，我們分別通過兩種 client 連上它。

chrome devtools

在 chrome 地址欄輸入 chrome://inspect，然后點(diǎn)擊 configure 來配置目標(biāo)端口：

把剛才的端口 9229 填上去：

然后就可以看到 chrome 掃描到了這個(gè) target，點(diǎn)擊 inspect 就可以連上這個(gè) debugger server。

之后就可以設(shè)置斷點(diǎn)、單步執(zhí)行、執(zhí)行表達(dá)式、查看作用域變量等，這些功能都是通過 v8 debug protocol 來實(shí)現(xiàn)的。

vscode debugger

在 vscode 里面寫代碼，在 chrome devtools 里調(diào)試比較麻煩，vscode 也實(shí)現(xiàn)了 debugger 的支持，可以直接用 vscode 來調(diào)試。

使用vscode 調(diào)試能力的方式是修改項(xiàng)目根目錄下的 .vscode/launch.json 配置。

attach

點(diǎn)擊右下角的按鈕來添加一個(gè)配置項(xiàng)。這里選擇 nodejs 的 attach：

因?yàn)橐呀?jīng)通過 node --inspect-brk 啟動(dòng)了 websocket 的 debugger server，那么只需要啟動(dòng) websocket client，然后 attach 上 9229 端口就行。

點(diǎn)擊左側(cè)的按鈕，就可以連上 debugger server 開始調(diào)試：

launch

這樣先通過 node --inspect-brk 啟動(dòng) debugger server，然后再添加 vscode debug 配置來連接上太麻煩了，能不能把這兩步合并呢?

當(dāng)然可以，只要添加一個(gè) launch 的配置：

這里的 type 是 launch，就是啟動(dòng) debgger server 并且啟動(dòng)一個(gè) debugger client 連接上該 server。運(yùn)行的程序是根目錄下的 index2.js，還可以設(shè)置 stopOnEntry 來在首行斷住。

點(diǎn)擊調(diào)試，就可以看到能夠成功的調(diào)試該 js 文件。

vscode 會(huì)啟動(dòng) debugger server，然后啟動(dòng) debugger client 自動(dòng)連接上該 server，這些都不需要我們?nèi)リP(guān)心。

這樣我們就可以成功的使用 vscode debugger 來調(diào)試 nodejs 代碼。

vscode debugger 進(jìn)階

debugger client 中我們最常用的還是 vscode，這里著重講一下 vscode debugger 的各種場景下的配置。

sourcemap

如果調(diào)試 ts 代碼，肯定不能調(diào)試編譯后的代碼，要能夠映射回源碼，這個(gè)是 sourcemap 做的事情。調(diào)試工具都支持 sourcemap，比如 chrome devtools 和 vscode debugger，都支持文件末尾的 sourcemap url 的解析：

//# sourceMappingURL=index.js.map

這樣當(dāng)調(diào)試 index.js的時(shí)候，如果它是 ts 編譯的出來的，就會(huì)自動(dòng)找到對(duì)應(yīng)的 ts。

當(dāng)然，如果調(diào)試配置里面直接指定了 ts，那么要能夠調(diào)試需要再配置 outFiles，告訴 vscode 去哪里找 sourcemap。

這樣，在 ts 源碼中打的斷點(diǎn)和在編譯出的 js 打的斷點(diǎn)都能生效。

多進(jìn)程調(diào)試

當(dāng)代碼中有子進(jìn)程的時(shí)候，就有了第二條控制流，需要再啟動(dòng)一個(gè) debugger。

比如 vscode，它是基于 electron，需要啟動(dòng)一個(gè)主進(jìn)程，一些渲染進(jìn)程。主進(jìn)程是通過 launch 啟動(dòng)的，而渲染進(jìn)程則是后來 attach 的。

主進(jìn)程啟動(dòng)的時(shí)候，通過 --remote-debugging-port 來指定子進(jìn)程自動(dòng)的時(shí)候的 debugger server 的端口。

outFiles 來指定 sourcemap 的位置，這樣才可以直接調(diào)試 ts 源碼。runtimeExecutable 是用 vscode 的運(yùn)行時(shí)替代掉了 nodejs(一般不需要設(shè)置)。

然后渲染進(jìn)程是后面啟動(dòng)的，我們通過參數(shù)配置了會(huì)啟動(dòng)在 9222 端口，那么只要 attach 到那個(gè)端口就可以調(diào)試該進(jìn)程了。

vscode 支持多 target 調(diào)試，也就是可以在 vscode 里面同時(shí)啟動(dòng) 多個(gè) debugger?？梢郧袚Q不同的 debugger 來調(diào)試不同的進(jìn)程。

總結(jié)

debugger 的使用是一項(xiàng)很重要的能力，對(duì)于 nodejs 水平的提升很有幫助。

nodejs debugger 的原理是 js 引擎會(huì)啟動(dòng) debugger server(websocket)，等待客戶端連接，我們可以通過各種 debugger client 連上來進(jìn)行調(diào)試，比如 chrome devtools、vscode debugger。

調(diào)試 nodejs 代碼更多還是使用 vscode debugger(當(dāng)然有的時(shí)候也會(huì)使用 chrome devtools 調(diào)試，基于 chrome devtools 的 memory 來進(jìn)行內(nèi)存分析，定位內(nèi)存泄漏問題的時(shí)候很有幫助)。

vscode debugger 的使用主要是在 .vscode/launch.json 里面添加調(diào)試配置。

調(diào)試配置分為 launch 和 attach 兩種：

• launch 會(huì)啟動(dòng) debugger server 并用 debugger client 連接上
• attach 只是啟動(dòng) debugger client 連接上已有的 debugger server，所以要指定端口

具體的配置項(xiàng)常用的有：

• outFiles 指定 sourcemap 的位置，用來調(diào)試 ts 源碼等需要編譯的代碼
• stopOnEntry 在首行停住
• args 來指定一些命令行參數(shù)
• runtimeExecutable 當(dāng)運(yùn)行時(shí)不是 nodejs 的時(shí)候需要指定，比如 vscode 或者其他的一些運(yùn)行時(shí)

基于這些配置我們就可以調(diào)試各種場景下的 nodejs 代碼，需要編譯的，或者多個(gè)進(jìn)程的。

不夸張地說，如果你熟悉了 debugger 的使用，理解各種 nodejs 代碼都會(huì)簡單很多。希望這篇文章能夠幫助大家了解 debugger 的原理，并且能夠使用 chrome devtools 或者 vscode debugger 來調(diào)試 nodejs 代碼。知道有 sourcemap 以及多進(jìn)程的情況下都怎么調(diào)試。