使用Chrome DevTools调试Node.js

使用Chrome DevTools调试Node.js

调试对程序员的重要性不必多言，不过自己日常定位问题主要还是靠阅读代码与console大法，很少借助断点调试定位问题，主要原因在于目前使用的VIM不包含调试功能，但Node.js v6.3之后支持使用Chrome DevTools进行代码调试，本文主要讲解如何使用。

概述

Node.js早期版本调试用的是实现V8-Debug协议的Debugger模块，通过node debug xxx.js进入调试模式，由于是使用命令进行交互导致难以学习与操作，不过大部分IDE都集成了对用户友好的图形界面，所以有IDE的话，调试还是非常方便的。

早期也可以使用Chrome DevTools进行调试，这主要借助node-inspect在Debugger与Chrome DevTools之间做协议转换实现。2017年5月，Node.js开始支持通过Inspector Protocol让Chrome DevTools与Node.js Debugger直连进行调试，让调试更为方便。

使用

直连调试需要Node.js版本>=6.3，Chrome DevTools版本>=55

Node.js代码

app.js内容：

const http = require('http');
const util = require('./util');

http.createServer((req, res) => {
    res.end(util.sayGood());
}).listen(3000);

util.js内容：

exports.sayGood = sayGood;

function sayGood() {
    return 'good';
}

执行node --inspect app.js：

$ node --inspect app.js 
Debugger listening on ws://127.0.0.1:9229/f4a33953-9556-40bd-89ce-d63be191ac07
For help see https://nodejs.org/en/docs/inspector

Chrome DevTools

Debugger成功监听后，需要打开Chrome DevTools中的Node.js的调试面板，有以下方式：

• F12打开网页调试窗口（Mac：Command + option + j），点击左上角第三个（可能有差异）绿色六边形即可进入Node.js调试面板
• 在地址栏输入chrome://inspect或about:inspect，然后Devices -> Remote Target -> 入口文件inspect

Node DevTools面板中的菜单简介：

• Connection，DevTools会自动连接到对应的连接上，即所需调试的客户端
• Console，输出终端，代码中通过console打印的信息
• Profiler，可统计一段时间内具体代码的CPU开销，对于定位性能问题、性能优化很有帮助
• Sources，Node.js调试时代码在Sources -> Network中，这个是主要的调试面板，打断点、堆栈信息等都是在此面板下
• Memory，获取内存快照信息，定位内存问题

开始调试

打开Node.js的DevTools，在Sources -> Network中找到并打开app.js（Mac快捷键Command + o），接着在发送响应的位置标记一个断点：

然后在浏览器中访问http://localhost:3000，代码就会在断点处停住，使用右侧的窗口可完成各种调试步骤：到下一个断点、跳到下一个函数调用、进入函数、从函数中出来，往前执行一步等。

题外话

之所以最后来一个题外话，主要是因为对部门小年轻的调试习惯有所感触，小伙遇到不理解的代码，不经思索的就一波调试，遇到问题更是立马来一波调试，这种调试往往也比较低效，因为调试不只需要技巧，还需要熟悉代码逻辑。

正如文章开头所说，调试重要性在程序员圈内无需强调，但我想强调调试并不是万能钥匙，甚至有可能是低效的，大部分简单问题很容易通过理解代码去定位，而不是面对任何问题就马上祭出调试工具。调试工具应该是在理解代码逻辑前提但无法明显推断出问题点时使用，熟悉代码逻辑后再进行调试，通常已经带有目的和猜测，只是通过调试去验证或找到异常点。

博客原文