譯者按: 本文介紹了使用Node Inspector來除錯 JavaScript和TypeScript應用。
- 原文: Debugging JavaScript/TypeScript Node apps with Chrome DevTools, VS Code and WebStorm ??
- 譯者: Fundebug
為了保證可讀性,本文采用意譯而非直譯。另外,本文版權歸原作者所有,翻譯僅用於學習。

我準備了一個計算斐波拉契序列的例子,放在Github倉庫。我建議你將它克隆下來並且跟著我操作。當然,這不是必須的。
$ git clone https://github.com/andrerpena/medium-node-inspector-tests.git
$ cd medium-node-inspector-tests
$ npm i
複製程式碼
我把本文需要使用到的命令都寫成了指令碼。如果你沒有克隆程式碼,那麼參考下面的指令碼:
"scripts": {
"build:ts": "tsc",
"start": "node index.js",
"start:watch": "nodemon index.js",
"start:debug": "node --inspect index.js",
"start:debug:brk": "node --inspect-brk index.js",
"start:debug:ts": "node --inspect --require ts-node/register index.ts",
"start:debug:ts:brk": "node --inspect-brk --require ts-node/register index.ts"
}
複製程式碼
當你的環境配置好了,你可以使用npm start
來啟動程式,並訪問localhost:3000/[n]
來檢視斐波拉契序列。

因為我想演示JavScript和TypeScript debugging,所有我寫了index.ts
檔案和對應的JavaScript版本由tsc命令生成。所以,JavaScript版本看上去會有一點醜。
Debug模式執行
我們將會用兩種模式來debugging。分別使用--inspect
和--inspect-brk
。它們的區別在於,第二種在像Chrome DevTools這樣的agent接入前,不會真的啟動。並且,啟動後,會自動在使用者的第一行程式碼處暫停。
當一個Node.js應用在inspect模式下執行,有兩點要注意:
-
一個UUID會分配到這個debugging會話。並且同時一個WebSockets終端(ws://127.0.0.1:9229/[UUID])會一直連線。該終端會將程式碼的狀態實時傳送。
-
一個HTTP終端(
http://127.0.0.1:9229/json
)會提供,便於像Chrome DevTools這樣的終端知曉Node會話和相應的UUID。
你可以curl http://127.0.0.1:9229/json
。更多資訊請檢視: legacy-debugger。

使用Chrome DevTools Debugging JavaScript
執行:
npm start:debug // if you're on the suggested repo or...
node --inspect index.js // ...otherwise.
複製程式碼
你會看到:

你可以看到一個WebSocket伺服器在啟動,並且監聽9229埠。並且可以看到UUID是5dc97...
。每一個會話都有各自的UUID。如果你重啟服務,UUID會改變。
下一步是開啟Chrome,並在網址框輸入Chrome://inspect。

在這裡,我想說的是:Chrome通過訪問http://127.0.0.1:9229/json
可以自動發現正在執行的會話。現在點選上圖最下方的inspect
來開始debugging。一個新的DevTools視窗會開啟。你可以訪問想要debug的檔案,去加入斷點來deug。

如果,你執行:
npm start:debug:brk // if you're on the suggested repo or...
node --inspect-brk index.js // ...otherwise.
複製程式碼
可以看到:

當你在谷歌瀏覽器輸入Chrome://Inspect,你會發現兩個版本的TypeScript檔案:一個有對應的source map(標記為[sm]),另一個沒有。當然,如果要除錯,把斷點放在帶sm標記的檔案裡面。

開發中有這麼多工具可以使用,那麼上線以後呢?還能愉快debug嗎?你可以的,歡迎使用Fundebug!
使用Visual Studio來Debugging JavaScript
選擇要Debug的目標JavaScript檔案,點選Debug選項(Mac: Shift+Cmd+D),然後點選執行按鈕(▶️)即可。Visual Studio 會自動加入inspect引數啟動Node。

如果想在控制檯執行,你也可以建立一個launch configuration檔案。Visual Studio的自動補全非常驚豔。記住9929是預設的Node Inspector的埠號。
{
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 9229
}
]
}
複製程式碼
如果你夠仔細,會發現上面的配置檔案並沒有制定UUID。其實、Visual Studio會自動去訪問ws://127.0.0.1:9229
來獲取當前會話的狀態。當你配置好後,可以在控制檯執行:
npm start:debug // if you're on the suggested repo or...
node --inspect index.js // ...otherwise.
複製程式碼
然後配置launch configuraiton,並Attatch
,最好點選播放按鈕。如下所示:

使用Visual Studio來Debugging TypeScript
在Visual Studio中,如果配置了"type":"node",則不允許使用.ts字尾的檔案,那麼你還有兩個方法:要麼用ts-node將.ts編譯。
{
"configurations": [
{
"name": "Current TS File",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/.bin/ts-node",
"args": ["${relativeFile}"],
"protocol": "inspector"
}
]
}
複製程式碼
或則將runtimeExecutable指定為NPM,而不是預設的node。
{
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"start:debug:ts"
],
"port": 9229
},
]
}
複製程式碼
如果你想在控制檯執行TypeScript,如下:
npm start:debug:ts // if you're on the suggested repo or...
node --require ts-node/register index.ts // ...otherwise.
複製程式碼
launch configuraiton如下:
{
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 9229
}
]
}
複製程式碼
使用WebStorm來Debugging JavaScript
在右上角,可以選擇Run/Debug Configurations
,點選並選擇+號,然後會列出很多候選配置。然後選擇Node.js,並命名。在JavaScript file選項,填入你的入口檔案。然後就可以執行啦。

使用WebStorm來Debugging TypeScript
和處理JavaScript的配置幾乎一樣,不過在Node Parameters選項,你需要填寫--inspect --require ts-node/register
。

希望本文可以助你愉快(fun)debug!