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社群，每週定時推送優質文章。