如何除錯你的 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 是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 的結果。
第一種方式（自己嘗試無效）
開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 後可以看到這個圖標，點擊一下：
chrome://inspect/#devices，可以看到目前瀏覽器監聽的所有 inspect。
.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"
}
]
}
透過 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中文網其他相關文章！
