Nodejs調試的各類姿式

時間 2019-11-06

標籤 nodejs 調試各類简体版

原文原文鏈接

Node.js 調試的痛點

對於絕大部分前端人員，對JavaScript的調試更多停留在瀏覽器中，相似console.log和debugger，但這種方式對代碼侵入性較高，甚至須要刷新頁面或重啓編譯器。轉向服務端後，沒有瀏覽器界面，若是僅停留在原來的調試方式，開發效率想必是較低的。所以，前端人員轉向服務端開發時，要習慣於命令行及 IDE 等調試手段，走出溫馨區，才能準肯定位問題，提升開發效率。javascript

Node.js 調試的手段

下文中涉及到的依賴庫及軟件版本html

Node.js - v10.15.3
Chrome - v72.0.3626
VS Code - v1.13.0

如下代碼段爲例，用koa起一個簡單的http server前端

const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
    const time = new Date();
    ctx.body = `hello, hiker! ${time}`;
});

app.listen(3000, () => {
    console.log('nodejs listening 3000.');
});
複製代碼

1. console.log()

對前端人員很是友好，與瀏覽器中調試同樣，console.log()、console.error()、console.time()等各類console形式，在代碼中須要調試的地方直接寫上，只是展現形式有所不一樣，在Node.js中是在終端命令行中打印。這是最簡單快速的調試手段，缺點也很明顯，對原有代碼入侵較大，在特定場景中使用較侷限。java

舉例

app.use(async ctx => {
    const time = new Date();

    console.time('TIME_TAKE');
    console.log('this is time', time);

    ctx.body = `hello, hiker! ${time}`;
    console.timeEnd('TIME_TAKE');
});

app.listen(3000, () => {
    console.log('nodejs listening 3000.');
});
複製代碼

結果

終端起服務：node index.js，並瀏覽器訪問localhost:3000, 便可在終端命令行中看到相應打印的日誌。node

2. Debugger Protocol (node-inspector)

Nodejs v6.3+ 的版本提供了兩個用於調試的協議：v8 Debugger Protocol 和 v8 Inspector Protocol 可使用第三方的 Client/IDE 等監測和介入 Node(v8) 運行過程，進行調試。git

node-inspector是早期能夠基於Chrome，有可視化調試界面的調試工具，用的是v8 Debugger Protocol協議，經過 TCP 端口與 Client/IDE 交互通訊。但因爲v8 Inspector Protocol的推出，這個工具逐漸被替代，後文會介紹相應替代方案。github

使用方式

$ npm install -g node-inspector

經過瀏覽器鏈接到node-inspector，啓動inspector服務：
$ node-inspector

以debug模式運行node.js應用：
$ node --debug=5858 index.js

瀏覽器打開 http://127.0.0.1:8080/debug?port=5858，後臺會提供一個相似於 chrome devtools 的 UI 調試界面。
複製代碼

3. Inspector Protocol + Chrome DevTools

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

$ node --inspect=9222 index.js
複製代碼

若是程序執行完會直接結束進程的，那麼--inspect會一閃而過，斷點信號還沒發送出去前就結束了，斷點根本不起做用，這種狀況能夠用--inspect-brk啓動調試器，使得腳本能夠代碼執行以前break。chrome

結果

ws://127.0.0.1:9222/a45dc332-2c8c-4614-bf01-1dbf212ae28a這個不是提供給咱們在Chrome瀏覽器中訪問的地址，而是Node.js和Chrome之間進行通訊的的地址，經過websocket進行通訊，從而將調試結果實時展現在Chrome瀏覽器中。npm

那麼如何獲取在chrome瀏覽器中的調試地址？咱們能夠訪問http://localhost:9222/json/list，能夠看到相應信息。其中id爲UUID，是一個特定的標識，每個進程都會分配一個uuid，所以每一次調用會有出現不一樣的結果。devtoolsFrontendUrl則爲咱們要訪問的chrome地址，新窗口打開這個地址便可調試。

更便捷的調試入口

上述步驟是否是有點麻煩，沒關係，強大的Chrome提供了更方便的調試入口。

node --inspect=9222 index.js起服務後，打開瀏覽器訪問http監聽端口頁面，並打開調試窗口，能夠看到一個綠色的按鈕，點開便可下斷點調試，是否是很方便？

這個綠油油的按鈕究竟打開了什麼呢？咱們能夠繼續看。訪問chrome://inspect/#devices，能夠看到當前瀏覽器監聽的全部inspect

到這裏，咱們就能夠利用Chrome DevTools的各種功能，Sources Panel查看腳本、Profile Panel監測性能等，文中不具體展開。

4. Inspector Protocol + VS Code

對服務端開發來說，瀏覽器的使用反而不那麼頻繁，所以在IDE中調試Nodejs顯得格外重要。值得高興的是，市面上各種IDE對Nodejs的調試還算友好，尤爲是VS Code。它內置了Node debugger，支持v8 Debugger Protocol和v8 Inspector Protocol兩種協議。

launch

在VS Code中，打開調試/添加配置/，以下圖，添加launch配置，點擊開始調試便可。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}\\index.js"
        }
    ]
}
複製代碼