【译】使用 ndb 调试 node 应用

 

原文链接：Debugging Node.js Application Using ndb

Google Chrome 实验室发布了一款新的 node debug 工具来提升开发者体验，本文将会全面介绍 ndb 这款 node 工具

熟悉 node 的人可能知道，node 一直支持一个无头调试工具:

它使用了一个已经被弃用的协议叫做 V8 调试器协议，并且它并不算是一个功能完备的调试器，只有一些简单的检查功能。

过去在这种情况下，一个新的基于 V8 调试器协议和 Blink 的调试工具出现在开发者眼前，它能够允许我们在任何一个 Webkit 内核的浏览器 DevTools 上面调试我们的 node 应用，是的，它就是 node-inspector，它的出现大幅增加了我们调试 node 应用的效率。

在 node 的 V6.3.0 版本中，V8 Inspector 作为一个实验特性被加入到这个版本中，它带来了一个非常强大的调试协议，同时还集成了 Chrome 的 DevTools 并且支持非常多的新特性如Blackbox、profiling、workspaces和sourcemap等等。此外，它并不依赖已经被弃用的 V8 调试器协议，而是直接基于 Chrome 的调试协议，因此它可以直接跑在调试客户端里面，像 Chromium 内核浏览器、VSC ode、WebStorm这些。启动它也非常简单，只需要输入命令 node --inspect scrip.js 即可。

在 7.20 号的时候，一个叫做 ndb 的全新 node 调试工具也同步开源了。

有新的 node 调试工具的确令人振奋，但这个新的 ndb 拥有哪些新特性呢？

ndb 出现的背景

首先附上 ndb 的官方定义：

ndb is an improved debugging experience for Node.js, enabled by Chrome DevTools （ndb 是一次对 node 调试体验的升级，Chrome DevTools 原生支持 ndb）

从上面的定义中，我们可以发现：

1. ndb 能够提升调试体验
2. Chrome DevTools 原生支持 ndb，意味着它使用的是 Chrome 的调试协议，类似于 V8 Inspector
3. ndb是谷歌 Chrome 实验室维护的

因此，你可能认为 ndb 只是提供了一个升级版的 V8 Inspector ，然而事实并非如此。

我们可以发现，使用 V8 Inspector 和 Chrome DevTools 有两个前提：一是 node 版本要大于 6.3.0，另一个是必须要用 Chrome 或者 Chromium 内核的浏览器。如果我们不满足这两个条件或者想在非 Chromium 内核下调试的话怎么办呢？

前面我们没说到 ndb 的使用依赖什么环境，它依赖一个叫做 Puppeteer 的包，Puppeteer 是一个通过 Chrome DevTools 协议来控制 Chromium 的包，它提供了很多封装好的接口。

当 ndb 安装了 Puppeteer 之后，一个最新的与当前环境兼容的 Chromium 也被安装到了依赖包里。

因为是独立安装的，所以 ndb 不依赖操作系统的浏览器，这种对浏览器不依赖的特性也成为了 ndb 的一个优势。

但它同时也带来一个问题，那就是 node_modules 会比较大，毕竟里面有一个 Chromium。

那么 ndb 在调试上的体验如何呢？

探索ndb

第一步我们先用 express 建一个 node 应用 demo：

// app.js
const express = require('express');
const app = express();

app.get('/', (req, res) => res.send('Hello World!'));

app.listen(3000, () => console.info('Example app listening on port 3000!'));


复制代码

再在 package.json 定义一个运行脚本：

"scripts": {
  "start": "node app.js"
}

复制代码

如何安装

首先我们在全局环境或者本地安装 ndb。

npm install -g ndb

复制代码

启动ndb

我们有好几种方法启动 ndb：

1️⃣ - 直接执行文件

我们可以通过直接用 ndb 命令执行一个文件来开启 ndb，如：

ndb app.js


复制代码

2️⃣ - 运行一个二进制可执行文件

有时候我们想要用 ndb 来调试一些可执行二进制文件启动的服务，如 npm 脚本、webpack、单元测试这些。

只需要执行如下命令：

ndb npm start

复制代码

上面我们用 ndb 运行了一个 npm 脚本，同样的，只要配置妥当我们还可以运行 ndb webpack 或 ndb mocha 等命令

3️⃣ - 运行一个项目

如果我们只是需要打开一个 ndb 服务，可以直接在项目目录里面执行 ndb . 来打开，这个命令允许我们在执行脚本之前设置断点、编辑文件或其他任何东西。

PS：接下来的示例我们都采用第三种启动方法来示范

放置断点

在调试的时候放置断点非常简单

我们可以在模块被实际加载之前就放置断点

处理文件

使用 Chrome DevTools，我们可以在项目中创建和编辑文件，并将它们保存

运行 npm 脚本

如果项目中包含一些 npm 脚本，可以通过 ndb 的面板中运行

![Running an npm script]qpic.url.cn/feeds_pic/a…)

内置终端

通过 ndb 也可以直接访问终端

Blackboxing

在默认情况下，ndb 会屏蔽一些外部文件，如 node 内置库，我们调试的时候对这些外部文件并不需要关心

进程面板

这个面板会列出当前由 ndb 启动的所有 node 进程。此外，子进程会收拢到它的父进程中，方便管理和终止

代码片段

ndb 支持创建一些代码片段来执行和调试

变量访问

当前进程变量和 node 的全局变量，ndb 都可以访问到

---

《IVWEB 技术周刊》 震撼上线了，关注公众号：IVWEB社区，每周定时推送优质文章。

周刊文章集合: weekly

关注下面的标签，发现更