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

分手后的思念是犯贱 2023-01-19 08:29 24阅读 0赞

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

--------------------

如需转载请标明出处：[http://blog.csdn.net/itas109 ][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中有安全限制，不让通过超链接直接访问本地文件

解决：

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: 署名-非商业使用-禁止演绎*][License under CC BY-NC-ND 4.0_ _-_-]

--------------------

Refrence：

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

[http_blog.csdn.net_itas109]: http://blog.csdn.net/itas109
[129518033]: http://shang.qq.com/wpa/qunwpa?idkey=2888fa15c4513e6bfb9347052f36e437d919b2377161862948b2a49576679fc6
[License under CC BY-NC-ND 4.0_ _-_-]: https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh