开发Chrome扩展——Node.js Debugger

2017-11-30 本文已影响0人勤劳的小叶

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扩展程序面板。扩展工具程序面板入口

2.直接将的.crx文件拖拽到扩展程序面板中，添加扩展程序。

屏幕快照 2017-11-30 13.23.31.png

添加扩展程序成功，可以在工具栏看到我们扩展程序的图标（绿色小图标）。添加成功提示

Node.js Debugger扩展程序使用介绍

输入主机名和端口号，默认情况下主机名为localhost，端口号为9229，如果在启动node inspector时，你使用的不是--inspect，而是--inspect=127.0.0.1:8000，此时Chrome与node inspector的通信端口为8000，因此，你需要重新设置端口。
情况一：
使用--inspect参数此时，打开Chrome，点击扩展程序，直接点击调试即可。

情况二：

使用--inspect=ip:port参数

设置端口号9000

此时，就必须设置端口号，如果不设置点击调试的话，就会弹出弹出层，而不能正确访问调试页面。

使用过程中注意事项

确保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. 待改进

启动扩展程序时，第一个输入框被选中，出现蓝色背景。
未提供用户设置选项。