Google Chrome 实验室发布了一款新的 node debug 工具来提高开发者体验，本文将会全面介绍 ndb 这款 node 工具webpack
熟悉 node 的人可能知道，node 一直支持一个无头调试工具:git
它使用了一个已经被弃用的协议叫作 V8 调试器协议，而且它并不算是一个功能完备的调试器，只有一些简单的检查功能。github
过去在这种状况下，一个新的基于 V8 调试器协议和 Blink 的调试工具出如今开发者眼前，它可以容许咱们在任何一个 Webkit 内核的浏览器 DevTools 上面调试咱们的 node 应用，是的，它就是 node-inspector，它的出现大幅增长了咱们调试 node 应用的效率。web
在 node 的 V6.3.0 版本中，V8 Inspector 做为一个实验特性被加入到这个版本中，它带来了一个很是强大的调试协议，同时还集成了 Chrome 的 DevTools 而且支持很是多的新特性如Blackbox、profiling、workspaces和sourcemap等等。此外，它并不依赖已经被弃用的 V8 调试器协议，而是直接基于 Chrome 的调试协议，所以它能够直接跑在调试客户端里面，像 Chromium 内核浏览器、VSC ode、WebStorm这些。启动它也很是简单，只须要输入命令 node --inspect scrip.js 便可。chrome
在 7.20 号的时候，一个叫作 ndb 的全新 node 调试工具也同步开源了。express
有新的 node 调试工具的确使人振奋，但这个新的 ndb 拥有哪些新特性呢？npm
ndb 出现的背景
首先附上 ndb 的官方定义：json
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