您好,登錄后才能下訂單哦!
JavaScript 程序越來(lái)越復(fù)雜,調(diào)試工具的重要性日益凸顯??蛻舳四_本有瀏覽器,Node 腳本怎么調(diào)試呢?
2016年,Node 決定將 Chrome 瀏覽器的"開發(fā)者工具"作為官方的調(diào)試工具,使得 Node 腳本也可以使用圖形界面調(diào)試,這大大方便了開發(fā)者。
本文介紹如何使用 Node 腳本的調(diào)試工具。
一、示例程序
為了方便講解,下面是一個(gè)示例腳本。首先,新建一個(gè)工作目錄,并進(jìn)入該目錄。
$ mkdir debug-demo $ cd debug-demo
然后,生成 package.json
文件,并安裝Koa 框架和 koa-route 模塊。
$ npm init -y $ npm install --save koa koa-route
接著,新建一個(gè)腳本 app.js
,并寫入下面的內(nèi)容。
// 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');
上面代碼是一個(gè)簡(jiǎn)單的 Web 應(yīng)用,指定了兩個(gè)路由,訪問(wèn)后會(huì)顯示一行歡迎信息。如果想詳細(xì)了解代碼的詳細(xì)含義,可以參考Koa 教程。
二、啟動(dòng)開發(fā)者工具
現(xiàn)在,運(yùn)行上面的腳本。
$ node --inspect app.js
上面代碼中, --inspect
參數(shù)是啟動(dòng)調(diào)試模式必需的。這時(shí),打開瀏覽器訪問(wèn) http://127.0.0.1//3000,就可以看到 Hello World 了。
接下來(lái),就要開始調(diào)試了。一共有兩種打開調(diào)試工具的方法,第一種是在 Chrome 瀏覽器的地址欄,鍵入 chrome://inspect
或者 about:inspect
,回車后就可以看到下面的界面。
在 Target 部分,點(diǎn)擊 inspect 鏈接,就能進(jìn)入調(diào)試工具了。
第二種進(jìn)入調(diào)試工具的方法,是在 http://127.0.0.1//3000 的窗口打開"開發(fā)者工具",頂部左上角有一個(gè) Node 的綠色標(biāo)志,點(diǎn)擊就可以進(jìn)入。
三、調(diào)試工具窗口
調(diào)試工具其實(shí)就是"開發(fā)者工具"的定制版,省去了那些對(duì)服務(wù)器腳本沒(méi)用的部分。
它主要有四個(gè)面板。
這些面板的用法,基本上跟瀏覽器環(huán)境差不多,這里只介紹 Sources (源碼)面板。
四、設(shè)置斷點(diǎn)
進(jìn)入 Sources 面板,找到正在運(yùn)行的腳本 app.js
。
在第11行(也就是下面這一行)的行號(hào)上點(diǎn)一下,就設(shè)置了一個(gè)斷點(diǎn)。
ctx.response.body = 'Hello ' + name;
這時(shí),瀏覽器訪問(wèn) http://127.0.0.1:3000/alice ,頁(yè)面會(huì)顯示正在等待服務(wù)器返回。切換到調(diào)試工具,可以看到 Node 主線程處于暫停(paused)階段。
進(jìn)入 Console 面板,輸入 name,會(huì)返回 alice。這表明我們正處在斷點(diǎn)處的上下文(context)。
再切回 Sources 面板,右側(cè)可以看到 Watch、Call Stack、Scope、Breakpoints 等折疊項(xiàng)。打開 Scope 折疊項(xiàng),可以看到 Local 作用域和 Global 作用域里面的所有變量。
Local 作用域里面,變量 name
的值是 alice
,雙擊進(jìn)入編輯狀態(tài),把它改成 bob
。
然后,點(diǎn)擊頂部工具欄的繼續(xù)運(yùn)行按鈕。
頁(yè)面上就可以看到 Hello bob 了。
命令行下,按下 ctrl + c,終止運(yùn)行 app.js
。
五、調(diào)試非服務(wù)腳本
Web 服務(wù)腳本會(huì)一直在后臺(tái)運(yùn)行,但是大部分腳本只是處理某個(gè)任務(wù),運(yùn)行完就會(huì)終止。這時(shí),你可能根本沒(méi)有時(shí)間打開調(diào)試工具。等你打開了,腳本早就結(jié)束運(yùn)行了。這時(shí)怎么調(diào)試呢?
$ node --inspect=9229 -e "setTimeout(function() { console.log('yes'); }, 30000)"
上面代碼中, --inspect=9229
指定調(diào)試端口為 9229,這是調(diào)試工具默認(rèn)的通信端口。 -e
參數(shù)指定一個(gè)字符串,作為代碼運(yùn)行。
訪問(wèn) chrome://inspect
,就可以進(jìn)入調(diào)試工具,調(diào)試這段代碼了。
代碼放在 setTimeout
里面,總是不太方便。那些運(yùn)行時(shí)間較短的腳本,可能根本來(lái)不及打開調(diào)試工具。這時(shí)就要使用下面的方法。
$ node --inspect-brk=9229 app.js
上面代碼中, --inspect-brk
指定在第一行就設(shè)置斷點(diǎn)。也就是說(shuō),一開始運(yùn)行,就是暫停的狀態(tài)。
六、忘了寫 --inspect 怎么辦?
打開調(diào)試工具的前提是,啟動(dòng) Node 腳本時(shí)就加上 --inspect
參數(shù)。如果忘了這個(gè)參數(shù),還能不能調(diào)試呢?
回答是可以的。首先,正常啟動(dòng)腳本。
$ node app.js
然后,在另一個(gè)命令行窗口,查找上面腳本的進(jìn)程號(hào)。
$ 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
的進(jìn)程號(hào)是 30464
。
接著,運(yùn)行下面的命令。
$ node -e 'process._debugProcess(30464)'
上面命令會(huì)建立進(jìn)程 30464 與調(diào)試工具的連接,然后就可以打開調(diào)試工具了。
還有一種方法,就是向腳本進(jìn)程發(fā)送 SIGUSR1 信號(hào),也可以建立調(diào)試連接。
$ kill -SIGUSR1 30464
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。