如何在Chrome DevTools 中对Node程序进行调试

最新推荐文章于 2024-05-23 11:29:05 发布

jackletter

最新推荐文章于 2024-05-23 11:29:05 发布

阅读量679

点赞数

分类专栏：大前端文章标签： nodejs 调试

大前端专栏收录该内容

77 篇文章 2 订阅

订阅专栏

转自：https://www.jianshu.com/p/198a9cf83aae

相信有很多人和我一样，习惯了使用chrome调试js程序，然而node刚开始提供的调试方式只用Debugger，只能通过node --debug xxx.js启动命令行调试工具，及其的不方便。当然也有一些插件在此基础上，使用websocket进行通信，使其可以在chrome浏览器中调试。体验和直接在chrome上进行调试还是差了很多。

然而在Node v7.x.x后，Node有提供了一个Inspector，可以直接和Chrome DevTools进行通信，下面来详细介绍进入调试的步骤，以及在使用过程中，我遇到的问题及解决办法。

具体调试步骤详细介绍

1. Chrome DevTools和Node版本要求

Chrome DevTools： 55+
在地址栏中输入chrome://settings/help，查看Chrome版本

Chroem版本
Node.js： v7.x.x+
在命令行中输入node --version进行查看

Node.js版本

2. 运行脚本，并访问调试页面

总体步骤：先根据具体情况，选用不同的参数运行脚本；然后访问相应的url获取调试页面的访问地址；最后访问这个地址，进入调试页面。

在命令行中运行相应脚本，使用--inspect，或者--inspect-brk开启调试开关，如node --inspect path/xxx.js 或者node --inspect-brk path/xxx.js。下面根据不同情况进行具体分析。

情况1

首先启动脚本，如果你的脚本搭建http或者net服务器，你可以直接使用--inspect。如

let net = require('net');

// 创建一个net服务器
const server = net.createServer();

// 连接回调函数
server.on('connection', (conn) => {
    console.log('connection');
});

// 监听8080端口
server.listen(8080);

// 监听回调函数
server.on('listening', () => {
    console.log('listening')
});

使用--inspect后显示结果

注：

上图是在v8.9.1版本时显示的结果，后面会一次列举出其他版本下的结果。
Debugger listening on ws://127.0.0.1:9229/890b7b49-c744-4103-b0cd-6c5e8036be95，其中给定的url并不是提供给我们在Chrome浏览器中访问的地址，而是Node.js和Chrome之间进行通信的的地址，它们通过websocket通过指定的端口进行通信，从而将调试结果实时展示在Chrome浏览器中。

然后，访问http://IP:port/json/list（其中IP就是主机的IP地址，通常为127.0.0.1，port则是端口号，默认为9229，这是Node提供给任意调试工具链接调试的协议，可以通过命令行参数进行修改参数文档地址），会返回相应http请求的元数据，包括WebSocket URL，UUID，Chrome DevTools URL。其中，WebSocket URL就是Node.js和Chrome之间的通信地址；UUID是一个特定的标识，每一个进程都会分配一个uuid，因此每一次调用会有出现不同的结果；Chrome DevTools URL就是我们的调试页面的url。

如访问http://127.0.0.1:9229/json/list，我们将会得到一下结果，其中devtoolsFrontendUrl就是我们需要访问的地址。

屏幕快照 2017-11-22 14.34.13.png

最后，访问这个地址后显示页面：

调试页面

情况2（重要）

如果你的脚本运行完之后直接结束进程，那么你需要使用--inspect-brk来启动调试器，这样使得脚本可以代码执行之前break，否则，整个代码直接运行到代码结尾，结束进程，根本无法进行调试。如：

function sayHi(name) {
    console.log('Hello, ' + name);
}

sayHi('yyp');

使用--inspect:

直接使用--inspect

直接使用--inspect，代码执行完毕后，进程直接结束，因此没有办法在进行调试。

使用--inspect-brk:

使用--inspect-brk

访问127.0.0.1:9229

调试页面

从上面三张图中可以看出，此时该Node进程并没有直接退出，并且我们可以通过访问http://127.0.0.1:9229/json/list获取页面url，并且在调试页面中我们也发现，程序在第一行break。

细心的你，可能还发现，与我们所写的程序不同的是，调试页面中，将我们的程序包裹在一个函数中，因为浏览器中不存在相应的对象（实际原因可以自行去研究）。

其他工具

node-inspector
在使用这个工具之前，我一直在使用node-inspector，只需要使用npm install -g node-inspector安装node-inspector命令行工具，然后在使用node-inspector path/xxx.js即可启动调试。
不足之处：调试体验比较差，相对Chrome DevTools使用，感觉不够流畅，并且在较高版本中，debugger被废弃（v7.7.0+），进而无法使用，可能会报错（v8.9.1版本直接报错）。

vsCode + webStorm
提供直接调试功能（未使用过）。

问题及解决方法

1. 网上传统的过时设置方法访问地址

过时设置方法

出现的问题，就是按照以上步骤操作之后，我们并没有发现Node debugging的选项，此时，就不知道如何进行下去了。在这里给出的解释是，在最新版的Chrome浏览器中，Node debugging不需要手动去启动了，而是默认就是可以使用的。

1. 不同Node版本出现的问题

分别在三个大版本下进行了测试（v6.9.2，v7.3.0，v8.9.1）

v6.9.2 版本下使用情况

命令行执行结果

访问http://127.0.0.1:9229/json/list

此时你会发现，命令行已经给你访问Chrome的url，并且这个url和访问http://127.0.0.1:9229/json/list得到的devtoolsFrontendUrl属性值一样，但是，当你访问这个url时，浏览器却不能显示调试页面，此时，说明你的Node版本太低，需要使用更高版本。

v7.3.0 版本下使用情况