技术栈

主页 > 前端开发 >

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

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

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

目录

  1. 具体调试步骤详细介绍
  2. 问题及解决方法
  3. 其他工具
  4. 相关文档

具体调试步骤详细介绍

1. Chrome DevTools和Node版本要求

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

  2. Node.js: v7.x.x+
    在命令行中输入node --version进行查看

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')
});

注:

  1. 上图是在v8.9.1版本时显示的结果,后面会一次列举出其他版本下的结果。
  2. 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');
  1. 使用--inspect:

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

  1. 使用--inspect-brk:

从上面三张图中可以看出,此时该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 版本下使用情况

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

此时,命令行也提供了访问调试页面的链接。

v8.9.1 版本下使用情况

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

此时,命令行给定的的url并不是调试页面的url,因此必须通过访问http://127.0.0.1:9229/json/list来获取调试页面url。

相关文档

Debugging Guide
Debugging Node.js Apps

责任编辑:admin  二维码分享:
本文标签: 调试NodeChrome访问
点击我更换图片

评论列表