102

Node.js 应用的可视化调试与性能分析 - 早起搬砖 morning.work

 6 years ago
source link: http://morning.work/page/maintainable-nodejs/debuging-nodejs-with-chrome-devtools.html?
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Node.js 应用的可视化调试与性能分析

字节跳动 Web Infra 团队成员、 《Node.js实战》作者之一
个人主页: http://ucdok.com
GitHub: https://github.com/leizongmin
" target="_blank">老雷 创作于 2017-11-26 , 2017-11-29 第 1 次更新
Node.js Debug 全文约 2493 字，预计阅读时间为 7 分钟

在 Node.js v6.3 之前的版本，调试程序使用的是旧的 V8 Debugger Protocol，可以通过 node --debug app.js 来进行。而为了能在图形界面下进行可视化断点调试，需要借助 VSCode、WebStorm 之类的编辑器和插件，或者安装额外的工具，比如 node-inspector 。

对于大多数的前端开发者来讲，对 Chrome 浏览器自带的 DevTools 并不陌生。新版本的 Node.js 开始支持新的 Chrome DevTools Protocol，通过 node --inspect app.js 即可启动新版本的调试协议，借助 Chrome DevTools 即可达到与以往调试 Web 页面一样的使用体验。

一些编辑器也开始支持新的 Node.js 调试协议，或者通过安装 Chrome 插件 NIM 来支持。但是如果你电脑上已安装了 Node.js 6.3+ 和 Chrome 55+，那么不再需要任何额外的工具即可轻轻松松调试你的 Node.js 程序了。

首先让我们新建一个程序文件 app.js 以便体验新的调试方式：

const http = require('http');
const server = http.createServer(function (req, res) {
  res.writeHead(200, { 'content-type': 'text/html' });
  res.end('<h1>It works!</h1>');
});
server.listen(3000, function () {
  console.log('Listening on http://localhost:3000');
});

然后执行以下命令启动程序并进入调试模式：

node --inspect app.js

可以看到控制台打印出以下信息：

Debugger listening on ws://127.0.0.1:9229/1bde07a4-2afa-44b1-a3bc-45aa9977ff67
For help see https://nodejs.org/en/docs/inspector
Listening on http://localhost:3000

此时，打开 Chrome 浏览器（需要 Chrome 55 或更高版本），在地址栏中输入 chrome://inspect 并按回车，会打开如下界面：

chrome-devtools-1

点击界面上的 Open dedicated DevTools for Node 链接即可打开调试窗口：

chrome-devtools-2

在该窗口中点击 Sources 标签，并在左侧边栏的 file:// 下找到我们编写的源码文件 app.js 即可看到其源码。如果要进行断点调试，只需要在源码的行号上点一下即可：

chrome-devtools-3

在窗口的右侧边栏，可以看到 Watch（监视） 、 Call Stack（调用堆栈） 、 Scope（作用域） 等信息。你也可以直接在源码窗口修改里面的代码，并按 ⌘ + S（Windows 系统是 Ctrl + S）保存即可立即生效。

关于在 Chrome DevTools 调试 JavaScript 更详细的介绍可以参考这篇文章：《使用 Chrome DevTools 调试 JavaScript》

通过调试界面的 Profiler 标签可以分析哪些 Node.js 程序的 CPU 占用比较高：

chrome-devtools-4

我们可以借助 wrk 命令进行简单的 HTTP 接口测试。首先点击界面中的 Start 按钮开始记录 CPU 占用信息，然后在命令行窗口执行以下命令（启动 5 个线程，100 个并发连接，持续 1 分钟）：

wrk -c 100 -t 5 -d 1m http://localhost:3000/

等待 1 分钟，命令执行完毕后，在 DevTools 界面点击 Stop 按钮，即可看到如下的结果：

chrome-devtools-5

另外还可以通过 Memory 标签来进行内存占用相关的分析。

关于 Chrome DevTools 的进行 JavaScript 性能分析的更详细使用方法可以参考这篇文章：《Chrome DevTools 之 Profiles，深度性能优化必备》

调试 TypeScript 程序

如果你的程序是使用 TypeScript 编写的，可以借助 ts-node 来启动调试模式：

ts-node --inspect app.ts

node --inspect --require ts-node/register app.ts

调试正在运行的 Node.js 进程

如果程序启动的时候没有加上 --inspect 选项，为了让它进入调试模式，可以给该进程发送 SIGUSR1 信号来调试（92801 是被调试 Node.js 进程的 PID，根据实际情况替换）：

kill -s SIGUSR1 92801

可以看到该进程控制台会打印出以下提示：

Debugger listening on ws://127.0.0.1:9229/cc35d4da-c8ae-42e3-943a-8ac81d5c067a
For help see https://nodejs.org/en/docs/inspector

此时按照上文的方法使用 Chrome DevTools 调试即可。

调试单元测试程序

如果你正在使用 Mocha 框架来运行你的单元测试程序，可以在执行时加上 --inspect-brk 参数：

mocha --inpsect-brk

那么单元测试程序在执行时会自动在入口出暂停，如果想让程序执行到某个地方暂停，可以通过 debugger 语句来实现：

function main() {
  debugger;
  console.log('hello, world!');
}

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK