Node.js 深度調(diào)試方法解析
在 Node.js 項(xiàng)目開(kāi)發(fā)過(guò)程中，隨著項(xiàng)目的發(fā)展，調(diào)用關(guān)系越來(lái)越復(fù)雜，調(diào)試工具的重要性日益凸顯。
Node(v6.3+)集成了方便好用 V8 Inspect 調(diào)試器，允許我們通過(guò) Chrome DevTools 進(jìn)行圖形化的調(diào)試和性能分析。同時(shí)，我們也可以使用 VS Code，Webstorm 等支持的編輯器對(duì) Node.js 程序進(jìn)行調(diào)試。
Node Inspect
要想啟動(dòng)調(diào)試器，我們需要在啟動(dòng) Node.js 應(yīng)用程序時(shí)傳入 --inspect 標(biāo)志，也可以使用該標(biāo)志提供自定義的端口，例如 --inspect=9222 將會(huì)在 9222 端口上接受開(kāi)發(fā)者工具的連接。
一段簡(jiǎn)單的代碼
function log() { let a = 1; console.log(a); a = 2; console.log(a); } log();
使用 node --inspect 啟動(dòng)
這時(shí)我們會(huì)發(fā)現(xiàn)，程序直接執(zhí)行完成了，沒(méi)有中斷，導(dǎo)致我們無(wú)法使用 Chrome DevTools 進(jìn)行調(diào)試。對(duì)于這種直接執(zhí)行的代碼，我們可以使用 --inspect-brk 參數(shù)，在應(yīng)用程序代碼的第一行終端，然后再進(jìn)行調(diào)試。
Chrome DevTools
當(dāng)開(kāi)啟 Node 調(diào)試后，我們可以打開(kāi) Chrome，訪問(wèn) chrome://inspect ，在 Devices 中查找到我們的 Node.js 程序，點(diǎn)擊 inspect 打開(kāi)調(diào)試面板進(jìn)行操作
在調(diào)試工具窗口，我們可以設(shè)置斷點(diǎn)，運(yùn)行程序進(jìn)行調(diào)試
運(yùn)行中程序調(diào)試
在某些情況下，我們可以需要對(duì)正在運(yùn)行的 Node.js 程序進(jìn)行調(diào)試，比如 Express Web 服務(wù)。我們不可能停止服務(wù)，再以 --inspect 運(yùn)行調(diào)試。
對(duì)于這種情況，我們可以先獲取服務(wù)的進(jìn)程 Id
向腳本進(jìn)程發(fā)送 SIGUSR1 信號(hào)，就可以建立調(diào)試連接
kill -SIGUSR1 34943復(fù)制代碼
在 Windows 平臺(tái)下，可以使用下面的命令
node -e ’process._debugProcess(30464)’
需要注意的是：這種調(diào)試任然會(huì)中斷服務(wù)進(jìn)程的執(zhí)行。
VS Code 調(diào)試
快速調(diào)試
對(duì)于簡(jiǎn)單的應(yīng)用程序，可以打開(kāi)文件，按 F5 并選擇調(diào)試類型為 Node，即可進(jìn)行調(diào)試
使用配置調(diào)試
對(duì)于大多數(shù)的調(diào)試場(chǎng)景，更推薦使用配置文件，因?yàn)樗梢耘渲貌⒈４嬲{(diào)試設(shè)置的信息，方便我們下次快速使用。在 VC Code 中，調(diào)試配置通常存儲(chǔ)在 .vscode 文件夾下的 launch.json 文件中 。可以點(diǎn)擊左側(cè)欄目中的調(diào)試圖標(biāo)，快速創(chuàng)建 launch.json 文件
VS Code 會(huì)自動(dòng)下面類似的 launch.json 調(diào)試配置文件，其中 program 代表我們需要調(diào)試的文件路徑，workspaceFolder 為當(dāng)前工作區(qū)的路徑，通常是項(xiàng)目的根目錄
{ 'version': '0.2.0', 'configurations': [ { 'type': 'node', 'request': 'launch', 'name': '啟動(dòng)程序', 'skipFiles': ['<node_internals>/**'], 'program': '${workspaceFolder}/index.js' } ] }
設(shè)置斷點(diǎn)，即可啟動(dòng)調(diào)試，并在左側(cè)的樹(shù)視圖中看到變量對(duì)應(yīng)的值以及堆棧信息
launch.json
launch.json 中有許多不同的屬性，支持不同的調(diào)試器和調(diào)試場(chǎng)景，下面的屬性在每個(gè)啟動(dòng)配置中是必須的
name - 當(dāng)前調(diào)試配置項(xiàng)的名稱，可讀性要好，區(qū)分每個(gè)調(diào)試配置項(xiàng) type - 用于此啟動(dòng)配置的調(diào)試器的類型。每個(gè)已安裝的調(diào)試擴(kuò)展都引入一種類型：例如node，php，go 等。 request - 當(dāng)前調(diào)試項(xiàng)的類型，目前支持 launch 和 attach 兩種類型。launch 適合調(diào)試未啟動(dòng)的程序，attach 則適合調(diào)試已經(jīng)運(yùn)行的程序。一些其他比較有用的選項(xiàng)：
program - 啟動(dòng)調(diào)試器時(shí)要運(yùn)行的可執(zhí)行程序或文件 args - 傳遞給程序進(jìn)行調(diào)試的參數(shù) env - 調(diào)試時(shí)的環(huán)境變量 envFile - 包含環(huán)境變量鍵值對(duì)的文件 stopOnEntry - 程序啟動(dòng)時(shí)立即中斷 port - 連接到正在運(yùn)行的調(diào)試器的端口 runtimeExecutable - 啟用調(diào)試的可執(zhí)行 Runtime，默認(rèn)是 Node日志點(diǎn) - Logpoints
VS Code 提供了好用的調(diào)試小工具 - 日志點(diǎn)，日志點(diǎn)是斷點(diǎn)的一種變體，它不 '中斷 '進(jìn)入調(diào)試器，而是將一條消息記錄到控制臺(tái)，日志點(diǎn)對(duì)于在調(diào)試不能暫停或停止的生產(chǎn)服務(wù)器時(shí)注入日志特別有用。
NPM 腳本調(diào)試
除了使用 node 啟動(dòng) Node.js 項(xiàng)目之外，VS Code 還支持自定義啟動(dòng)程序 runtime，借助這個(gè)能力，可以直接使用 NPM 啟動(dòng)調(diào)試。如下面，使用 npm run debug 啟動(dòng)調(diào)試
{ 'version': '0.2.0', 'configurations': [ { 'type': 'node', 'request': 'launch', 'name': '啟動(dòng)程序', 'skipFiles': ['<node_internals>/**'], 'program': '${workspaceFolder}/index.js' } ] }
launch.json
{ 'type': 'node', 'request': 'launch', 'name': 'NPM 啟動(dòng)', 'runtimeExecutable': 'npm', 'runtimeArgs': ['run', 'debug'], 'port': 9229 }
TypeScript 調(diào)試
VS Code 內(nèi)置的 Node.js 的調(diào)試器支持 JavaScript Source Map，可以結(jié)合 Source Map 調(diào)試轉(zhuǎn)譯前的代碼，如 TypeScript，壓縮混淆的 JavaScript 代碼等都可以利用 Source Map 的支持調(diào)試源碼。
我準(zhǔn)備了一個(gè)簡(jiǎn)單的 TS Server Demo，可以直接 Clone 源碼本地測(cè)試。下面是項(xiàng)目中的 src/index.ts 文件，創(chuàng)建了一個(gè) HTTP Server
import * as http from 'http'; let reqCount = 1; http .createServer((req, res) => { const message = `Request Count: ${reqCount}`; res.writeHead(200, { 'Content-Type': 'text/html' }); res.end(`<html><div>${message}</div></html>`); console.log('handled request: ' + reqCount++); }) .listen(3000); console.log('server running on port 3000');
創(chuàng)建 tsconfig.json 配置，配置編譯生成 Source Map
{ 'compilerOptions': { 'outDir': './dist', 'sourceMap': true }, 'include': ['src/**/*'] }
使用 tsc 編譯一下，生成 JS 代碼：dist/index.js，創(chuàng)建調(diào)試配置，入口文件為 dist/index.js
{ 'type': 'node', 'request': 'launch', 'name': 'Launch Program', 'program': '${workspaceFolder}/dist/index.js', 'skipFiles': ['<node_internals>/**'] }
然后打斷點(diǎn)，啟動(dòng)調(diào)試，瀏覽器訪問(wèn) http://localhost:3000，即可看到調(diào)試進(jìn)入了 TS 文件
遠(yuǎn)程調(diào)試
當(dāng)我們需要在真實(shí)的服務(wù)器等遠(yuǎn)程運(yùn)行環(huán)境調(diào)試 Node.js 時(shí)，我們可以利用上面提到的方式，在服務(wù)器上開(kāi)啟 Node.js 調(diào)試功能，并在本地連接上遠(yuǎn)程的調(diào)試端口進(jìn)行調(diào)試。
VS Code 默認(rèn)支持遠(yuǎn)程調(diào)試，我們需要 launch.json 配置文件中指定遠(yuǎn)程服務(wù)的 IP 地址以及端口，如下所示：
{ 'type': 'node', 'request': 'attach', 'name': '遠(yuǎn)程調(diào)試', 'address': 'IP 地址', 'port': '9229' }
VS Code 會(huì)自動(dòng)加載遠(yuǎn)程的文件，展示為只讀代碼供調(diào)試使用。
如果想要在調(diào)試的過(guò)程中編輯源代碼，或者更好的調(diào)試體驗(yàn)，可以在遠(yuǎn)程文件夾和本地項(xiàng)目之間設(shè)置一個(gè)映射。VS Code 提供了 localRoot 和 remoteRoot 屬性來(lái)映射本地 VS Code 項(xiàng)目和（遠(yuǎn)程）Node.js 文件夾：
{ 'type': 'node', 'request': 'attach', 'name': '遠(yuǎn)程調(diào)試', 'address': 'IP 地址', 'port': '9229', 'localRoot': '${workspaceFolder}/src', 'remoteRoot': '/var/user/' }
在建立映射關(guān)系后，即可在本地項(xiàng)目進(jìn)行斷點(diǎn)調(diào)試，遠(yuǎn)程的斷點(diǎn)信息會(huì)同步到本地項(xiàng)目，使用起來(lái)十分方便。
子進(jìn)程調(diào)試
與普通進(jìn)程調(diào)試原理一致，子進(jìn)程調(diào)試時(shí)也需要傳入 --inspect 參數(shù)，這一點(diǎn)需要特別注意，否則無(wú)法啟動(dòng)子進(jìn)程調(diào)試。
如下通過(guò)子進(jìn)程啟動(dòng) Server 的例子：
// fork.js 文件 const { spawn } = require('child_process'); const sp = spawn('node', ['./fork_server.js']); console.log('父進(jìn)程 PID', sp.pid); sp.stdout.on('data', (data) => { console.log(`stdout: ${data}`); }); sp.stderr.on('data', (data) => { console.error(`stderr: ${data}`); });
如果直接使用 node --inspect 啟動(dòng)主進(jìn)程的話，會(huì)發(fā)現(xiàn)只顯示了主進(jìn)程的調(diào)試端口，這就是因?yàn)槲覀冊(cè)诔绦蛑袉?dòng)子進(jìn)程時(shí)沒(méi)有傳遞 --inspect 選項(xiàng)導(dǎo)致的。
這里我們?cè)趩?dòng)進(jìn)程時(shí)添加上 --inspect 參數(shù)，同時(shí)注意要指定一個(gè)默認(rèn) 9229 端口之外的端口號(hào)，避免調(diào)試端口沖突
- const sp = spawn('node', ['./fork_server.js']); + const sp = spawn('node', ['--inspect=9230', './fork_server.js']);
再次啟動(dòng)，就能看到兩個(gè)調(diào)試信息輸出了
當(dāng)然，怎么能少得了強(qiáng)大的 VS Code 呢。VS Code 的 Node 調(diào)試器提供了一種機(jī)制，可以追蹤所有子進(jìn)程，并在調(diào)試模式下，自動(dòng)鏈接進(jìn)程。可以通過(guò) autoAttachChildProcesses 屬性開(kāi)啟此機(jī)制：
{ 'type': 'node', 'request': 'launch', 'name': '啟動(dòng)程序', 'program': '${workspaceFolder}/fork.js', 'autoAttachChildProcesses': true }
啟動(dòng)后，即可對(duì)父進(jìn)程，或子進(jìn)程進(jìn)行斷點(diǎn)調(diào)試，效果如下
結(jié)語(yǔ)
到此這篇關(guān)于Node.js 深度調(diào)試方法解析的文章就介紹到這了,更多相關(guān)Node.js 深度調(diào)方法內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. python實(shí)現(xiàn)讀取類別頻數(shù)數(shù)據(jù)畫水平條形圖案例2. python中PyQuery庫(kù)用法分享3. python操作數(shù)據(jù)庫(kù)獲取結(jié)果之fetchone和fetchall的區(qū)別說(shuō)明4. 關(guān)于HTML5的img標(biāo)簽5. PHP獲取時(shí)間戳等相關(guān)函數(shù)匯總6. python 爬取嗶哩嗶哩up主信息和投稿視頻7. ASP.NET MVC前臺(tái)動(dòng)態(tài)添加文本框并在后臺(tái)使用FormCollection接收值8. CSS3實(shí)現(xiàn)動(dòng)態(tài)翻牌效果 仿百度貼吧3D翻牌一次動(dòng)畫特效9. php使用正則驗(yàn)證密碼字段的復(fù)雜強(qiáng)度原理詳細(xì)講解 原創(chuàng)10. JSP+Servlet實(shí)現(xiàn)文件上傳到服務(wù)器功能
網(wǎng)公網(wǎng)安備