Node調試工具使用步驟詳解

2016年，Node 決定將 Chrome 瀏覽器的"開發者工具"作為官方的調試工具，使得 Node 腳本也可以使用圖形界面調試，這大大方便了開發者。

本文介紹如何使用 Node 腳本的調試工具。

一、示例程序

為了方便講解，下面是一個示例腳本。首先，新建一個工作目錄，并進入該目錄。

$ mkdir debug-demo
$ cd debug-demo

然后，生成 package.json 文件，并安裝Koa 框架和 koa-route 模塊。

$ npm init -y
$ npm install --save koa koa-route

接著，新建一個腳本 app.js ，并寫入下面的內容。

// app.js
const Koa = require('koa');
const router = require('koa-route');
const app = new Koa();
const main = ctx => {
 ctx.response.body = 'Hello World';
};
const welcome = (ctx, name) => {
 ctx.response.body = 'Hello ' + name;
};
app.use(router.get('/', main));
app.use(router.get('/:name', welcome));
app.listen(3000);
console.log('listening on port 3000');

上面代碼是一個簡單的 Web 應用，指定了兩個路由，訪問后會顯示一行歡迎信息。如果想詳細了解代碼的詳細含義，可以參考Koa 教程。

二、啟動開發者工具

現在，運行上面的腳本。

$ node --inspect app.js

上面代碼中， --inspect 參數是啟動調試模式必需的。這時，打開瀏覽器訪問 http://127.0.0.1//3000，就可以看到 Hello World 了。

接下來，就要開始調試了。一共有兩種打開調試工具的方法，第一種是在 Chrome 瀏覽器的地址欄，鍵入 chrome://inspect 或者 about:inspect ，回車后就可以看到下面的界面。

在 Target 部分，點擊 inspect 鏈接，就能進入調試工具了。

第二種進入調試工具的方法，是在 http://127.0.0.1//3000 的窗口打開"開發者工具"，頂部左上角有一個 Node 的綠色標志，點擊就可以進入。

三、調試工具窗口

調試工具其實就是"開發者工具"的定制版，省去了那些對服務器腳本沒用的部分。

它主要有四個面板。

1. Console：控制臺

2. Memory：內存

3. Profiler：性能

4. Sources：源碼

這些面板的用法，基本上跟瀏覽器環境差不多，這里只介紹 Sources （源碼）面板。

四、設置斷點

進入 Sources 面板，找到正在運行的腳本 app.js 。

在第11行（也就是下面這一行）的行號上點一下，就設置了一個斷點。

ctx.response.body = 'Hello ' + name;

這時，瀏覽器訪問 http://127.0.0.1:3000/alice ，頁面會顯示正在等待服務器返回。切換到調試工具，可以看到 Node 主線程處于暫停（paused）階段。

進入 Console 面板，輸入 name，會返回 alice。這表明我們正處在斷點處的上下文（context）。

再切回 Sources 面板，右側可以看到 Watch、Call Stack、Scope、Breakpoints 等折疊項。打開 Scope 折疊項，可以看到 Local 作用域和 Global 作用域里面的所有變量。

Local 作用域里面，變量 name 的值是 alice ，雙擊進入編輯狀態，把它改成 bob 。

然后，點擊頂部工具欄的繼續運行按鈕。

頁面上就可以看到 Hello bob 了。

命令行下，按下 ctrl + c，終止運行 app.js 。

五、調試非服務腳本

Web 服務腳本會一直在后臺運行，但是大部分腳本只是處理某個任務，運行完就會終止。這時，你可能根本沒有時間打開調試工具。等你打開了，腳本早就結束運行了。這時怎么調試呢？

$ node --inspect=9229 -e "setTimeout(function() { console.log('yes'); }, 30000)"

上面代碼中， --inspect=9229 指定調試端口為 9229，這是調試工具默認的通信端口。 -e 參數指定一個字符串，作為代碼運行。

訪問 chrome://inspect ，就可以進入調試工具，調試這段代碼了。

代碼放在 setTimeout 里面，總是不太方便。那些運行時間較短的腳本，可能根本來不及打開調試工具。這時就要使用下面的方法。

$ node --inspect-brk=9229 app.js

上面代碼中， --inspect-brk 指定在第一行就設置斷點。也就是說，一開始運行，就是暫停的狀態。

六、忘了寫 --inspect 怎么辦？

打開調試工具的前提是，啟動 Node 腳本時就加上 --inspect 參數。如果忘了這個參數，還能不能調試呢？

回答是可以的。首先，正常啟動腳本。

$ node app.js

然后，在另一個命令行窗口，查找上面腳本的進程號。

$ ps ax | grep app.js 
30464 pts/11 Sl+ 0:00 node app.js
30541 pts/12 S+ 0:00 grep app.js

上面命令中， app.js 的進程號是 30464 。

接著，運行下面的命令。

$ node -e 'process._debugProcess(30464)'

上面命令會建立進程 30464 與調試工具的連接，然后就可以打開調試工具了。

還有一種方法，就是向腳本進程發送 SIGUSR1 信號，也可以建立調試連接。

$ kill -SIGUSR1 30464

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

推薦閱讀：

vue項目中怎樣關閉eslint代碼校驗

JS用事件委托給元素增加事件

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com