目录
- 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.jianshu.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
