NodeJs代码调试（inspector+chrome）实现谷歌浏览器调试后台nodejs代码

如需转载请标明出处：http://blog.csdn.net/itas109
QQ技术交流群：129518033

文章目录

NodeJs代码调试（inspector+chrome）实现谷歌浏览器调试后台nodejs代码
- 1.编写server.js文件
- 2.开启调试

注：nodejs6.3版本以后已经内置的调试模块，不需要再安装node-inspector等等。直接node --inspect-brk demo.js即可，参照:https://github.com/node-inspector/node-inspector/issues/1041

环境：
node 10、谷歌浏览器

1.编写server.js文件

'use strict';
var http = require('http');
var port = process.env.PORT || 1337;http.createServer(function (req, res) {res.writeHead(200, { 'Content-Type': 'text/plain' });res.end('Hello World\n');
}).listen(port);

2.开启调试

1）使用 node --inspect-brk=0.0.0.0:9876 server.js 开启调试

2）打开谷歌浏览器，输入地址：http://localhost:9876/json/list

[{"description": "node.js instance","devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=localhost:9876/f28707eb-bde0-46a9-8f3d-ad1c34d7bc4f","devtoolsFrontendUrlCompat": "devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=localhost:9876/f28707eb-bde0-46a9-8f3d-ad1c34d7bc4f","faviconUrl": "https://nodejs.org/static/images/favicons/favicon.ico","id": "f28707eb-bde0-46a9-8f3d-ad1c34d7bc4f","title": "index.js","type": "node","url": "file://D:_git_node-webdev_code_1.webFramework_1.express_1.express-http-https_index.js","webSocketDebuggerUrl": "ws://localhost:9876/f28707eb-bde0-46a9-8f3d-ad1c34d7bc4f"}
]

注：其中9229为node后台调试的默认端口，这个地址可以查询到可用的调试服务信息。这里设置的端口为9876

接口api(Get):

/json/protocol 获取当前 chrome 支持的协议，协议为 json 格式
/json/list 获取可调试的目标列表
/json/new 创建新的 tab 页
/json/activate/:id 根据 id 激活 tab 页
/json/close/:id 根据 id 关闭 tab 页
/json/version 获取浏览器/协议/v8/webkit 版本

3）将上一步中的devtoolsFrontendUrl地址粘贴到浏览器中即可

devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=localhost:9876/f28707eb-bde0-46a9-8f3d-ad1c34d7bc4f

4）浏览器新开窗口输入：http://localhost:1337/，可看到调试效果

window.open("devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=localhost:9876/f28707eb-bde0-46a9-8f3d-ad1c34d7bc4f")VM105:1 Not allowed to load local resource: devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=localhost:9876/f28707eb-bde0-46a9-8f3d-ad1c34d7bc4f

window.open("file:///C:/002.jpg");Not allowed to load local resource: file:///C:/002.jpg

Unchecked runtime.lastError: Cannot navigate to a devtools:// page without either the devtools or debugger permission.

手动开启Node远程调试

打开页面 chrome://inspect

点击 Open dedicated DevTools for Node

在 Add connection 处添加调试地址即可完成

原因：chrome中有安全限制，不让通过超链接直接访问本地文件

解决：

开启chrome flag解决安全问题
创建chrome插件，插件使用底层api访问devtool://解决该问题
修改代码
https://github.com/tksugimoto/chrome-extension_open-local-file-link

开发chrome插件的步骤：

使用什么开发工具
如何编写
如何打包
浏览器的ctx文件可以用chrome的【扩展程序-打包扩展程序】来打包，但是ctx必须上传chrome应用商店才能使用，否则需要使用【扩展程序-加载已解压的扩展程序】才能正常使用

可在 Chrome 中使用的扩展程序
为了在您浏览网页时确保您的安全，Chrome 只允许使用 Chrome 网上应用店中发布的扩展程序。

License

License under CC BY-NC-ND 4.0: 署名-非商业使用-禁止演绎

Refrence：

http://nodejs.cn/api/debugger.html
https://chromedevtools.github.io/devtools-protocol/