聊聊vscode中debugger的使用技巧

學習 nodejs 最重要的是什麼？可能每個人都有自己的答案。

我覺得學習 nodejs 除了要掌握基礎的 api、常用的一些套件外，最重要的能力是學會使用 debugger。因為當流程複雜的時候，斷點調試能夠幫你更好的理清邏輯，有 bug 的時候也能更快的定位問題。 【推薦學習：《nodejs 教程》、《vscode教程》】

狼叔說過，是否會使用debugger 是區分一個程式設計師nodejs 等級的重要標誌。

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

debugger 原理

##運行nodejs 程式碼的時候，如果帶了

--inspect（可以打斷點） 或- -inspect-brk（可以打斷點，並在首行斷住） 的參數，那麼就會以debugger 的模式啟動：

可以看到，node 啟動了一個web socket 的server，位址是：ws://127.0.0.1:9229/78637688-e8e0-4582-80cc-47655f4bff66

為什麼debugger 要啟動一個網頁？

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 如何執行程式碼。

debugger client

#debugger client 一般都是有ui 的（當然，在指令列裡面透過命令來調試也可以，但一般不這麼做）。常見的 js 的 debugger client 有 chrome devtools 和 vscode debugger 等。

我們寫一個簡單的js 腳本，透過node --inspect-brk 跑起來：

可以看到它啟動在了9229 端口，

然後，我們分別透過兩個client 連結它。

chrome devtools

在chrome 網址列輸入chrome://inspect，然後點選configure 來設定目標連接埠：

#把剛才的連接埠9229 填上去：

然後就可以看到chrome 掃描到了這個target，點擊inspect 就可以連上這個debugger server。

之後就可以設定斷點、單步執行、執行表達式、查看作用域變數等，這些功能都是透過v8 debug protocol 來實現的。

vscode debugger

在vscode 裡面寫程式碼，在chrome devtools 裡除錯比較麻煩，vscode 也實作了debugger 的支持，可以直接用vscode 來調試。

使用vscode 偵錯能力的方式是修改專案根目錄下的 .vscode/launch.json 設定。

attach

點擊右下角的按鈕來新增一個設定項。這裡選擇nodejs 的attach：

因為已經透過node --inspect-brk 啟動了websocket 的debugger server，那麼只需要啟動websocket client，然後attach 上9229 埠就行。

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

launch

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

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

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

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

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。

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

多进程调试

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

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

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

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

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

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

彩蛋

debugger 只能打断点么，不是的，它还可以这么用，加日志，不污染源码。

总结

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 以及多進程的情況下都怎麼調試。

原文網址：https://juejin.cn/post/6981820158046109703

作者：zxg_神說要有光

更多程式設計相關知識，請造訪：程式設計入門！ ！

以上是聊聊vscode中debugger的使用技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！