目錄
- Node.js Debugger擴(kuò)展展示及下載地址
- Node.js Debugger使用介紹
- Node.js Debugger開發(fā)思想
- 待改進(jìn)
- 相關(guān)資料
1. Node.js Debugger擴(kuò)展展示及下載地址
Node.js Debugger擴(kuò)展展示
-
初始頁面
初始展示頁面 -
操作失敗頁面
操作失敗頁面
Node.js Debugger擴(kuò)展下載地址
百度網(wǎng)盤地址：https://pan.baidu.com/s/1c1KLk5a
2. Node.js Debugger使用介紹
安裝Chrome擴(kuò)展
-
打開Chrome擴(kuò)展程序面板。擴(kuò)展工具程序面板入口
-
添加擴(kuò)展程序成功，可以在工具欄看到我們擴(kuò)展程序的圖標(biāo)（綠色小圖標(biāo)）。添加成功提示
Node.js Debugger擴(kuò)展程序使用介紹
- 輸入主機(jī)名和端口號，默認(rèn)情況下主機(jī)名為localhost，端口號為9229，如果在啟動node inspector時，你使用的不是--inspect，而是--inspect=127.0.0.1:8000，此時Chrome與node inspector的通信端口為8000，因此，你需要重新設(shè)置端口。
情況一：
此時，打開Chrome，點(diǎn)擊擴(kuò)展程序，直接點(diǎn)擊調(diào)試即可。使用--inspect參數(shù)
情況二：
此時，就必須設(shè)置端口號，如果不設(shè)置點(diǎn)擊調(diào)試的話，就會彈出彈出層，而不能正確訪問調(diào)試頁面。
使用過程中注意事項(xiàng)
確保node版本是7.x.x以上
node inspector功能是在7.x.x版本以上才能使用。因此，如果當(dāng)你點(diǎn)擊調(diào)試按鈕，彈出先標(biāo)簽頁，但是頁面一直在轉(zhuǎn)圈，此時，你就要查看一下，是否是你的node版本太低了。確保啟動了node inspector，并且建議使用--inspect-brk來啟動
如果你使用--inspect啟動node inspector，并且你調(diào)試的只是一個過程式的js，此時你的代碼在調(diào)試之前就已經(jīng)執(zhí)行完，無法再進(jìn)行調(diào)試，而是用--inspect-brk來啟動，將在所有程序的開頭開始調(diào)試，此時，你便可以在調(diào)試面板上添加斷點(diǎn)進(jìn)行調(diào)試。端口號設(shè)置問題
確定輸入框中設(shè)置的端口號是否正確，并且端口號是否已經(jīng)被占用。如果你設(shè)置的端口號已經(jīng)已經(jīng)被使用了，此時插件內(nèi)部可能報錯，但是并不會直接顯示到插件展示頁面上，因此，如果發(fā)現(xiàn)點(diǎn)擊調(diào)試按鈕不彈出彈出層，也不彈出新的標(biāo)簽頁，請檢查你的端口號是否被占用了。一次調(diào)試完成后，不能直接刷新頁面，開始下一輪調(diào)試
此時需要重新啟動新的node inspector，在按照上面的步驟打開頁面，否則可能會出現(xiàn)，無法進(jìn)行調(diào)試，或者無法打開調(diào)試頁面的情況。
3. Node.js Debugger開發(fā)思想
Inspector clients must know and specify host address, port, and UUID to connect to the WebSocket interface. The full URL is ws://127.0.0.1:9229/0f2c936f-b1cd-4ac9-aab3-f63b0f33d55e, of course dependent on actual host and port and with the correct UUID for the instance.
Node.js v7+版本提供了一個inspector的功能，在使用node運(yùn)行js程序時，可以添加--inspector打開這個功能。
該功能為Chrome DevTools提供了一個通信接口，這是的Node進(jìn)程可以和Chrome DevTools使用websocket直接進(jìn)行通信。
同時，也提供了用戶接口，用戶可以通過訪問
http://IP:port/json/list訪問到這個接口的相關(guān)信息，其中webSocketDebuggerUrl就是Chrome DevTools和Node進(jìn)程的websocket通信地址，而devtoolsFrontendUrl，就是我們可以訪問的調(diào)試面板地址。
[ {
"description": "node.js instance",
"devtoolsFrontendUrl": "chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9000/ce3d915c-367e-4751-980c-a50cede6379d",
"faviconUrl": "https://nodejs.org/static/favicon.ico",
"id": "ce3d915c-367e-4751-980c-a50cede6379d",
"title": "test.js",
"type": "node",
"url": "file:///Users/yyp/Desktop/test.js",
"webSocketDebuggerUrl": "ws://127.0.0.1:9000/ce3d915c-367e-4751-980c-a50cede6379d"
} ]
因此我們通過http://IP:port/json/list返回數(shù)據(jù)中的devtoolsFrontendUrl字段，獲取調(diào)試頁面地址，然后在chrome插件中創(chuàng)建一個新的標(biāo)簽頁，并且將該字段作為新標(biāo)簽頁的url即可。
4. 待改進(jìn)
- 啟動擴(kuò)展程序時，第一個輸入框被選中，出現(xiàn)藍(lán)色背景。
- 未提供用戶設(shè)置選項(xiàng)。
5. 相關(guān)資料
node inspector 相關(guān)
Debugging Guide: https://nodejs.org/en/docs/guides/debugging-getting-started/#debugging-guide
Debugging Node.js Apps: https://nodejs.org/en/docs/inspector/
如何在Chrome DevTools 中對Node程序進(jìn)行調(diào)試: http://www.lxweimin.com/p/3ed910d3866cChrome 插件開發(fā)相關(guān)
Chrome擴(kuò)展及應(yīng)用開發(fā)（首發(fā)版）:http://www.ituring.com.cn/book/1421
百度瀏覽器開發(fā)文檔：https://chajian.baidu.com/developer/extensions/getstarted.html源碼
github地址：https://github.com/DiligentYe/todo-list-chrome-extension/tree/nodejs-debugger
