使用 Chrome Devtools 調試您的 Node.js 程序

今日文章由 “Node.js技術棧@五月君” 授權分享，正文從下面開始～

俗話說：“工欲善其事，必先利其器”，調試是每一個開發(fā)人員都要遇到的問題，選擇一個合適的調試工具也尤為重要。 在 Node.js 開發(fā)過程中除了萬能的 console.log 之外，本節(jié)介紹一個 Node.js 與 Chrome Devtools 結合的調試工具，以后你可以選擇使用瀏覽器來調試 Node.js 應用程序了。

啟動調試器

創(chuàng)建測試代碼

const?fs?=?require('fs');
const?path?=?require('path');
const?filePath?=?path.resolve(__dirname,?'hello.txt')

console.log('filePath:?',?filePath);

fs.readFile(filePath,?(err,?res)?=>?{
??console.log(err,?res.toString());
});

運行帶有 --inspect-brk 標志的 node

啟動時在 node 后面加上 --inspect-brk? 標志，Node.js 將監(jiān)聽調試客戶端，默認情況下監(jiān)聽在 127.0.0.1:9229 地址，也可以顯示指定地址 --inspect-brk=_host:port_

$?node?--inspect-brk?app.js
Debugger?listening?on?ws://127.0.0.1:9229/c7a51e5a-d9be-4506-83fb-0a9340d2b9ba
For?help,?see:?https://nodejs.org/en/docs/inspector

注意 node --inspect 與 node --inspect-brk 的區(qū)別：--inspect 不會終斷，--inspect-brk 在用戶代碼啟動之前會終斷，也就是代碼在第一行就會暫停執(zhí)行。

在 Chrome 中打開

瀏覽器地址欄輸入 chrome://inspect/?按回車鍵，如下所示：

Remote Target 下展示了當前運行的 Node.js 版本號，打開 inspect?或 Open dedicated Devtools for Node?鏈接，如下所示：

斷點調試

調試工具窗口介紹

上方展示與服務器端調試需要的 5 個面板，和 Chrome 開發(fā)工具中的是基本相同的，可以理解為 “服務端的定制版”

• Connection：鏈接
• Console：控制臺
• Sources：源代碼調試（本節(jié)主要講的）
• Memory：內存，查找影響性能的內存問題，包括內存泄漏、內存膨脹和頻繁的垃圾回收
• Profiler：性能

右上角的五個圖表，從左至右依次分別表示：

• Resume script execution(F8): 恢復腳本執(zhí)行，每一次都會自動執(zhí)行到斷點處。
• Step over next function call(F10)：跳過下一個函數(shù)調用，執(zhí)行當前代碼行，在當前代碼行的下一行處停止，是一步一步的操作。
• Step into next function call(F11)：單步進入下一個函數(shù)調用。
• Step out next function call(F11)：單步退出下一個函數(shù)調用。
• Step(F9)：執(zhí)行當前代碼行并在下一行處停止。

設置斷點

在 Source 選項卡下，找到 app.js 這是我們測試腳本的入口文件，如果是執(zhí)行的 --inspect-brk 標志，默認會停留在代碼第一行處。

第一種設置斷點的方式，是在程序里加入 debugger 命令。

第二種設置斷點的方式是在編輯器窗口中單擊要設置的代碼行，此時編輯器窗口中該行會處于被選中狀態(tài)，還有一個右側的小箭頭。另外右下方 Breakpoints 面板中也展示出了我們設置的斷點。

取消斷點，再次單擊選中的代碼行左側，起到切換作用，或者右鍵選擇 ? Remove breakpoint

欲了解更多斷點調試相關內容，參考了解 Chrome DevTools 更多信息，參考 使用斷點暫停代碼

對已啟動 Node.js 進程做調試

如果一個 Node.js 進程啟動時沒有加 --inspect-brk 標志，但是我們又不想重啟進程來調試，這個時候怎么辦？以下兩種方式任何一種都可以：

方式一：process._debugProcess(PID)

找到當前啟動的 Node 進程 ID，之后使用 node -e 'process._debugProcess(26853)' 會建立進程 26853 與調試工具的鏈接。

$?ps?ax?|?grep?app.js?
26864?s001??S+?????0:00.01?grep?app.js
26853?s002??S+?????0:00.09?node?app.js

$?node?-e?'process._debugProcess(26853)'
SIGUSR1

方式二：SIGUSR1 信號

向 Node 進程發(fā)送 SIGUSR1 信號，也可以建立與調試工具的鏈接。在 Windows 上不可用，還需要注意版本，在 Node.js Version 8 或更高版本中將激活 Inspect API。

$?kill?-SIGUSR1?26853

測試

以下對 Demo 做了修改，創(chuàng)建一個 HTTP Server 每收到一個請求讀取文件，如果按照以上方式開啟調試工具后，在瀏覽器輸入 http://localhost:3000 回車后，會自動跳轉到調試界面，現(xiàn)在你可以設置斷點，向上面的方式一樣進行調試。

**Tips：**當前程序運行在斷點第 6 行，鼠標移動到 req.url 上之后會看到該屬性對應的值。

遠程調試

如果是在服務器上調試，建議不要讓調試器監(jiān)聽公共 IP 地址，這可能會引起遠程訪問的安全風險，但我們又想用本地的方式調試該怎么辦呢？

如果要允許遠程調試鏈接，建議是使用 SSL 隧道的方式，假設我們的服務運行在服務器 debug.nodejs.red 上，首先啟動服務，和上面的方式一樣。

$?node?--inspect-brk?app.js

設置 SSH 隧道

在本地計算機上設置 SSH 隧道，這將使本地計算機上端口為 9221 接收的鏈接轉換到服務器 debug.nodejs.red 上的 9229 端口。

$?ssh?-L?9221:localhost:[email protected]

Chrome DevTools 調試器的 Connection 中增加鏈接

默認情況下，Connection 下只有一個 localhost:9229，在添加 1 個 localhost:9221 之后我們就可以向在本地運行 Node.js 程序一樣進行調試。

Reference

• chrome-devtools
• debugging-getting-started

??愛心三連擊
1.看到這里了就點個在看支持下吧，你的「點贊，在看」是我創(chuàng)作的動力。
2.關注公眾號程序員成長指北，回復「1」加入高級前端交流群！「在這里有好多 前端?開發(fā)者，會討論?前端 Node 知識，互相學習」！
3.也可添加微信【ikoala520】，一起成長。
“在看轉發(fā)”是最大的支持