聊聊調試 Node.js 程式碼的兩種方式

如何除錯你的 Node 程式碼？以下這篇文章為大家介紹兩種常見的調試 Node.js 的方式，有一定的參考價值，希望對大家有幫助！

很多時候，我苦惱於Node.js 的調試，只會使用console.log 這種帶有侵入性的方法，但其實Node.js 也可以做到跟瀏覽器調試一樣的方便。

本文環境：

mac
Chrome 94.0.4606.81
node v12.12.0
vscode Version: 1.61.1

本文範例

本文範例採用的是先前探索洋蔥模型的，僅有一個文件，就是根目錄下#index.js ，如下：

const Koa = require('koa');

const app = new Koa();
console.log('test')

// 中间件1
app.use((ctx, next) => {
  console.log(1);
  next();
  console.log(2);
});

// 中间件 2 
app.use((ctx, next) => {
  console.log(3);
  next();
  console.log(4);
});

app.listen(9000, () => {
    console.log(`Server is starting`);
});

V8 Inspector Protocol Chrome DevTools

v8 Inspector Protocol 是nodejs v6.3 新加入的調試協議，透過websocket與Client/IDE 交互，同時基於Chrome/Chromium 瀏覽器的devtools 提供了圖形化的調試介面。

我們進入專案根目錄，執行（留意這個8888 端口，後面會用到）：

node --inspect=8888 index.js

結果如下：

結果出來一個連結－ws://127.0.0.1:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d。這個連結是 Node.js 和 Chrome 之前通信的 websocket 位址，透過 websocket 通信，我們可以在 Chrome 中即時看到 Node.js 的結果。

如何進入Chrome 的調試介面

第一種方式（自己嘗試無效）

開http://localhost:8888 /json/list，其中8888 是上面--inspect 的參數。

[
    {
        "description": "node.js instance",
        "devtoolsFrontendUrl": "chrome-devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=localhost:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d",
        "devtoolsFrontendUrlCompat": "chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=localhost:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d",
        "faviconUrl": "https://nodejs.org/static/images/favicons/favicon.ico",
        "id": "5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d",
        "title": "index.js",
        "type": "node",
        "url": "file:///Users/gpingfeng/Documents/Personal/Test/test-onion/index.js",
        "webSocketDebuggerUrl": "ws://localhost:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d"
    }
]

很多資料說，可以透過 devtoolsFrontendUrl 就可以直接訪問到，但嘗試了一下，並沒有成功。 【可能跟我的環境有關】

第二種方式

查了一下資料，在stackoverflow 找到對應的方案，如下：

devtools://devtools/bundled/inspector.html?experiments=true&ws=127.0.0.1:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d

其中devtools://devtools/bundled/inspector.html?experiments=true 是固定的，ws 參數對應的就是websocket 位址。

可以看到介面如下：

第三種方式

Chrome 瀏覽器開啟HTTP 監聽接口頁面，打開dev tool，執行完node --inspect=8888 index.js 後可以看到這個圖標，點擊一下：

##就可以出現跟瀏覽器一樣的偵錯頁面，例如Sources Panel查看腳本、Profile Panel 監控效能等。

另外，可以存取存取

chrome://inspect/#devices，可以看到目前瀏覽器監聽的所有 inspect。

Vscode 偵錯

除了瀏覽器之外，各大主流的 IDE 都支援 Node.js 的調試，本文以 Vscode 為例。

Launch Configuration

開啟偵錯頁面，為我們Node 專案新增一個launch 設定：

選擇Node.js

#這樣就會在專案根目錄產生對應的檔案

.vscode/launch.json（當然你也可以手動建立），其中program 指的就是檔案入口，${workspaceFolder} 指的是根目錄。

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/index.js"
    }
  ]
}

按F5、或點選如下按鈕：

#結果：

可以看到，左側可以顯示目前作用域的值，呼叫堆疊等訊息，右上方亦可逐步偵錯函數、重啟等功能，非常強大。

Attach to Node Process Action

透過 Attach to Node Process Action 的方式，我們可以直接偵錯執行中的 Node.js 進程。

例如我們先啟動專案－npm run start。

然後command shift p（window Ctrl Shift p），輸入Attach to Node Process Action，回車，然後選取執行過程再回車，就可以跟上面配置一樣調試程式碼了。

總結

本文總結了兩個常見的除錯 Node.js 的方式。第一種 Node.js 透過 websocket 的方式將資訊傳遞給 Chrome 瀏覽器，我們直接在 Chrome 中進行偵錯。第二種就是透過 Vscode Launch Configuration，自訂配置的方式進行除錯。透過 Attach to Node Process Action 的方式，可以方便的偵錯正在執行的 Node.js 程式碼，而不需要設定。

更多node相關知識，請造訪：nodejs 教學！ ！

以上是聊聊調試 Node.js 程式碼的兩種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！