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

---

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

注：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中有安全限制，不让通过超链接直接访问本地文件

解决：

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

---

开发chrome插件的步骤：

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

---

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

---

License

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

---

Refrence：

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