詳解配置VS Code/Webstorm來調試JavaScript

時間 2019-11-17

標籤詳解配置 code webstorm 調試 javascript 欄目 Storm 简体版

原文原文鏈接

譯者按： 本文介紹了使用Node Inspector來調試 JavaScript和TypeScript應用。javascript

原文: Debugging JavaScript/TypeScript Node apps with Chrome DevTools, VS Code and WebStorm 🐞🔫
譯者: Fundebug

爲了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原做者全部，翻譯僅用於學習。java

我準備了一個計算斐波拉契序列的例子，放在Github倉庫。我建議你將它克隆下來而且跟着我操做。固然，這不是必須的。node

$ git clone https://github.com/andrerpena/medium-node-inspector-tests.git
$ cd medium-node-inspector-tests
$ npm i
複製代碼

我把本文須要使用到的命令都寫成了腳本。若是你沒有克隆代碼，那麼參考下面的腳本：git

"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]來查看斐波拉契序列。github

由於我想演示JavScript和TypeScript debugging，全部我寫了index.ts文件和對應的JavaScript版本由tsc命令生成。因此，JavaScript版本看上去會有一點醜。web

Debug模式運行

咱們將會用兩種模式來debugging。分別使用--inspect和--inspect-brk。它們的區別在於，第二種在像Chrome DevTools這樣的agent接入前，不會真的啓動。而且，啓動後，會自動在用戶的第一行代碼處暫停。chrome

當一個Node.js應用在inspect模式下運行，有兩點要注意：typescript

一個UUID會分配到這個debugging會話。而且同時一個WebSockets終端(ws://127.0.0.1:9229/[UUID])會一直鏈接。該終端會將代碼的狀態實時發送。npm
一個HTTP終端(http://127.0.0.1:9229/json)會提供，便於像Chrome DevTools這樣的終端知曉Node會話和相應的UUID。json

你能夠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
        }
    ]
}
複製代碼