淺談Node 偵錯工具入門教學

這篇文章主要介紹了淺談Node 調試工具入門教程，現在分享給大家，也給大家做個參考。

JavaScript 程式越來越複雜，除錯工具的重要性日益凸顯。客戶端腳本有瀏覽器，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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Ajax实现智能提示搜索功能

Ajax请求成功后打开新窗口地址

通过Ajax方式上传文件使用FormData进行Ajax请求

以上是淺談Node 偵錯工具入門教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！