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