目錄
- Node.js Debugger擴展展示及下載地址
- Node.js Debugger使用介紹
- Node.js Debugger開發(fā)思想
- 待改進
- 相關資料
1. Node.js Debugger擴展展示及下載地址
Node.js Debugger擴展展示
-
初始頁面
初始展示頁面 -
操作失敗頁面
操作失敗頁面
Node.js Debugger擴展下載地址
百度網(wǎng)盤地址：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參數(shù)
情況二：
此時恢准，就必須設置端口號魂挂，如果不設置點擊調試的話，就會彈出彈出層馁筐，而不能正確訪問調試頁面涂召。
使用過程中注意事項
確保node版本是7.x.x以上
node inspector功能是在7.x.x版本以上才能使用。因此敏沉，如果當你點擊調試按鈕果正，彈出先標簽頁炎码，但是頁面一直在轉圈，此時秋泳，你就要查看一下潦闲，是否是你的node版本太低了。確保啟動了node inspector迫皱，并且建議使用--inspect-brk來啟動
如果你使用--inspect啟動node inspector歉闰，并且你調試的只是一個過程式的js，此時你的代碼在調試之前就已經(jīng)執(zhí)行完卓起，無法再進行調試和敬，而是用--inspect-brk來啟動，將在所有程序的開頭開始調試戏阅，此時昼弟，你便可以在調試面板上添加斷點進行調試。端口號設置問題
確定輸入框中設置的端口號是否正確奕筐，并且端口號是否已經(jīng)被占用舱痘。如果你設置的端口號已經(jīng)已經(jīng)被使用了，此時插件內部可能報錯救欧，但是并不會直接顯示到插件展示頁面上衰粹，因此锣光，如果發(fā)現(xiàn)點擊調試按鈕不彈出彈出層笆怠，也不彈出新的標簽頁，請檢查你的端口號是否被占用了誊爹。一次調試完成后蹬刷，不能直接刷新頁面，開始下一輪調試
此時需要重新啟動新的node inspector频丘，在按照上面的步驟打開頁面办成，否則可能會出現(xiàn)，無法進行調試搂漠，或者無法打開調試頁面的情況迂卢。
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運行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返回數(shù)據(jù)中的devtoolsFrontendUrl字段筋帖，獲取調試頁面地址奸晴，然后在chrome插件中創(chuàng)建一個新的標簽頁，并且將該字段作為新標簽頁的url即可日麸。
4. 待改進
- 啟動擴展程序時蚁滋，第一個輸入框被選中，出現(xiàn)藍色背景赘淮。
- 未提供用戶設置選項辕录。
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.reibang.com/p/3ed910d3866cChrome 插件開發(fā)相關
Chrome擴展及應用開發(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
