譯者按： 本文介紹了使用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！