使用Chrome DevTools調(diào)試Nodejs

shadajin 發(fā)布于2019-08-21 17:34 / 383人閱讀

摘要：第三步在打開在地址欄輸入并回車后就會(huì)看到以下頁(yè)面了點(diǎn)擊上面的鏈接跳轉(zhuǎn)到調(diào)試頁(yè)面你會(huì)看到一個(gè)調(diào)試當(dāng)前代碼的彈窗。更好的體驗(yàn)是，當(dāng)你的重啟后，這個(gè)調(diào)試窗口會(huì)重新連接。從上圖，你會(huì)看到一堆經(jīng)常用到的調(diào)試工具。

事實(shí)上chrome devtools在2016年5月就已經(jīng)支持Nodejs的調(diào)試了，具體可以觀看英文原版Google I/O上的視頻

第一步：下載和安裝最新版本的Nodejs(要求6.3.0及以上) 第二步：增加--inspect來(lái)運(yùn)行node

node --inspect index.js

當(dāng)然你也可以在代碼開始的時(shí)候斷點(diǎn):

node --inspect --debug-brk index.js

不過使用命令行的斷點(diǎn)功能還是比較艱難的，本人一般不使用。
接著你就可以打開一個(gè)長(zhǎng)長(zhǎng)的以chrome-devtools://開頭的URL...不過你現(xiàn)在不需要這樣干了，有更好的方法。

第三步：在chrome打開about:inspect

在地址欄輸入并回車后就會(huì)看到以下頁(yè)面了：

點(diǎn)擊inspect上面的鏈接跳轉(zhuǎn)到調(diào)試頁(yè)面

你會(huì)看到一個(gè)調(diào)試當(dāng)前nodejs代碼的彈窗。
更好的體驗(yàn)是，當(dāng)你的nodejs重啟后，這個(gè)調(diào)試窗口會(huì)重新連接。

從上圖，你會(huì)看到一堆經(jīng)常用到的調(diào)試工具。

完整并且好用的斷點(diǎn)工具；

通過source map看到源碼；

js熱更新，修改后即時(shí)生效;

控制臺(tái)支持es6特性，完美支持對(duì)象查看（這個(gè)功能很感人呀）；

簡(jiǎn)化js的采樣及調(diào)優(yōu)；

支持堆快照檢查，堆分配時(shí)間線，分配分析（方便內(nèi)存的調(diào)優(yōu)）

支持原生的異步堆棧；

PS: 非常遺憾的是devtools并不支持查看Nodejs發(fā)出的網(wǎng)絡(luò)請(qǐng)求(即network)，不過還是有辦法可以解決的，以后再發(fā)文細(xì)講這部分。

以上僅僅是簡(jiǎn)單的介紹，如果想了解更多，可以閱讀nodejs文檔：https://nodejs.org/en/docs/in...，其實(shí)官網(wǎng)關(guān)于inspector還是太粗略了，最好能閱讀關(guān)于debugger的文檔：https://nodejs.org/dist/lates...