目錄
- Node.js Debugger擴展展示及下載地址
- Node.js Debugger使用介紹
- Node.js Debugger開發思想
- 待改進
- 相關資料
1. Node.js Debugger擴展展示及下載地址
Node.js Debugger擴展展示
-
初始頁面
初始展示頁面 -
操作失敗頁面
操作失敗頁面
Node.js Debugger擴展下載地址
百度網盤地址：https://pan.baidu.com/s/1c1KLk5a
2. Node.js Debugger使用介紹
安裝Chrome擴展
-
打開Chrome擴展程序面板。擴展工具程序面板入口
-
添加擴展程序成功，可以在工具欄看到我們擴展程序的圖標（綠色小圖標）。添加成功提示
Node.js Debugger擴展程序使用介紹
- 輸入主機名和端口號，默認情況下主機名為localhost，端口號為9229，如果在啟動node inspector時，你使用的不是--inspect，而是--inspect=127.0.0.1:8000，此時Chrome與node inspector的通信端口為8000，因此，你需要重新設置端口。
情況一：
此時，打開Chrome，點擊擴展程序，直接點擊調試即可。使用--inspect參數
情況二：
此時，就必須設置端口號，如果不設置點擊調試的話，就會彈出彈出層，而不能正確訪問調試頁面。
使用過程中注意事項
確保node版本是7.x.x以上
node inspector功能是在7.x.x版本以上才能使用。因此，如果當你點擊調試按鈕，彈出先標簽頁，但是頁面一直在轉圈，此時，你就要查看一下，是否是你的node版本太低了。確保啟動了node inspector，并且建議使用--inspect-brk來啟動
如果你使用--inspect啟動node inspector，并且你調試的只是一個過程式的js，此時你的代碼在調試之前就已經執行完，無法再進行調試，而是用--inspect-brk來啟動，將在所有程序的開頭開始調試，此時，你便可以在調試面板上添加斷點進行調試。端口號設置問題
確定輸入框中設置的端口號是否正確，并且端口號是否已經被占用。如果你設置的端口號已經已經被使用了，此時插件內部可能報錯，但是并不會直接顯示到插件展示頁面上，因此，如果發現點擊調試按鈕不彈出彈出層，也不彈出新的標簽頁，請檢查你的端口號是否被占用了。一次調試完成后，不能直接刷新頁面，開始下一輪調試
此時需要重新啟動新的node inspector，在按照上面的步驟打開頁面，否則可能會出現，無法進行調試，或者無法打開調試頁面的情況。
3. Node.js Debugger開發思想
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運行js程序時，可以添加--inspector打開這個功能。
該功能為Chrome DevTools提供了一個通信接口，這是的Node進程可以和Chrome DevTools使用websocket直接進行通信。
同時，也提供了用戶接口，用戶可以通過訪問
http://IP:port/json/list訪問到這個接口的相關信息，其中webSocketDebuggerUrl就是Chrome DevTools和Node進程的websocket通信地址，而devtoolsFrontendUrl，就是我們可以訪問的調試面板地址。
[ {
"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返回數據中的devtoolsFrontendUrl字段，獲取調試頁面地址，然后在chrome插件中創建一個新的標簽頁，并且將該字段作為新標簽頁的url即可。
4. 待改進
- 啟動擴展程序時，第一個輸入框被選中，出現藍色背景。
- 未提供用戶設置選項。
5. 相關資料
node inspector 相關
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程序進行調試: http://www.lxweimin.com/p/3ed910d3866cChrome 插件開發相關
Chrome擴展及應用開發（首發版）:http://www.ituring.com.cn/book/1421
百度瀏覽器開發文檔：https://chajian.baidu.com/developer/extensions/getstarted.html源碼
github地址：https://github.com/DiligentYe/todo-list-chrome-extension/tree/nodejs-debugger
