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)
从上面的定义中,我们可以发现:
- ndb 能够提升调试体验
- Chrome DevTools 原生支持 ndb,意味着它使用的是 Chrome 的调试协议,类似于 V8 Inspector
- 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