【譯】在 Chrome 開發者工具中調試 node.js

• 原文連接 : Debugging Node.js in Chrome DevTools

• 原文做者 : MATT DESLAURIERS

• 譯文出自 : 掘金翻譯計劃

• 譯文連接 : https://github.com/sqrthree/sqrthree.github.io/issues/8

• 譯者 : sqrthree (根號三)

• 校對者: shenxn、CoderBOBO

這篇文章介紹了一種在 Chrome 開發者工具裏面開發、調試和分析 Node.js 應用程序的新方法。

devtool

最近我一直在開發一個命令行工具 devtool，它能夠在 Chrome 的開發者工具中運行 Node.js 程序。

下面的記錄顯示了在一個 HTTP 服務器中設置斷點的狀況。

該工具基於 Electron 將 Node.js 和 Chromium 的功能融合在了一塊兒。它的目的在於爲調試、分析和開發 Node.js 應用程序提供一個簡單的界面。

你可使用 npm 來安裝它:

npm install -g devtool

REPL

在某種程度上，咱們能夠用它來做爲 node shell 命令的替代品。例如，咱們能夠這樣打開一個 REPL (譯者注: REPL 全稱爲"Read-Eval-Print Loop"，是一個簡單的、交互式的編程環境)。

devtool

這將啓動一個帶有 Node.js 特性支持的 Chrome 開發者工具實例。

咱們能夠引用 Node 模塊、本地 npm 模塊和像 process.cwd() 這樣的內置模塊。也能夠獲取像 copy() 和 table() 這樣的 Chrome 開發者工具中的函數。

其餘的例子就一目瞭然了:

# run a Node script
devtool app.js

# pipe in content to process.stdin
devtool < audio.mp3

# pipe in JavaScript to eval it
browserify index.js | devtool

開發

咱們能夠在通用模塊和應用程序的開發中使用 devtool，來代替像 nodemon 這樣目前已經存在的工具。

devtool app.js --watch

這行命令將會在 Chrome 開發者工具中的控制檯中啓動咱們的 app.js， 經過 --watch 參數，咱們保存的文件將(自動)從新載入到控制檯。

點擊 app.js:1 連接，程序將會在 Sources 標籤中把咱們帶到與之相關的那一行。

在 Sources 標籤中，你也能夠敲擊 Cmd/Ctrl + P 按鍵在全部依賴的模塊中進行快速搜索。你甚至能夠審查和調試內置模塊，好比 Node.js 中的那些。你也可使用左手邊的面板來瀏覽模塊。

調試

由於咱們可以訪問 Sources 標籤，因此咱們能夠用它來調試咱們的應用程序。你能夠設置一個斷點，而後從新加載調試器(Cmd/Ctrl + R)，或者你也能夠經過 --break 標記來設置一個初始斷點。

devtool app.js --break

下面是一些對於那些學習 Chrome 開發者工具的人來講可能不是特別經常使用的功能:

• 條件斷點

• 有未捕獲的異常時暫停

• 重啓幀

• 監聽表達式

提示 - 當調試器暫停時，你能夠敲擊 Escape 按鍵打開一個執行在當前做用域內的控制檯。你能夠修改一些變量而後繼續執行。

分析

devtool 的另外一個功能是分析像 browserify, gulp 和 babel 這樣的程序。

這裏咱們使用 console.profile() (Chrome 的一個功能)來分析一個打包工具的 CPU 使用狀況。

var browserify = require('browserify');

// Start DevTools profiling...
console.profile('build');

// Bundle some browser application
browserify('client.js').bundle(function (err, src) {
  if (err) throw err;

  // Finish DevTools profiling...
  console.profileEnd('build');
});

如今咱們在這個文件上運行 devtool :

devtool app.js

執行以後，咱們能夠在 Profiles 標籤中看到結果。

咱們可使用右邊的連接來查看和調試執行頻率較高的代碼路徑。

高級選項

實驗

Chrome 會不斷的向他們的開發者工具中推送新功能和實驗，例如 Promise Inspector。你能夠經過點擊右上角的三個點，而後選擇 Settings -> Experiments 來開啓他們。

一旦啓用，你就能夠經過敲擊 Escape 按鍵來調出一個帶有 Promises 監視器的面板。

提示: 在 Experiments 界面，若是你敲擊 Shift 鍵 6 次，你會接觸到一些甚至更多的實驗性（不穩定）的功能。

--console

你能夠重定向控制檯輸出到終端中(process.stdout 和 process.stderr)。也容許你經過使用管道將它導入到其餘進程中，例如 TAP prettifiers。

devtool test.js --console | tap-spec

-- 和 process.argv

你的腳本能夠像一個普通的 Node.js 應用那樣解析 process.argv。若是你在 devtool 命令中傳遞一個句號(--)，它後面的全部內容都會被當作一個新的 process.argv 。例如:

devtool script.js --console -- input.txt

如今，你的腳本看起來像這樣:

var file = process.argv[2];
console.log('File: %s', file);

輸出:

File: input.txt

--quit 和 --headless

使用 --quit，當遇到了一個錯誤(如語法錯誤或者未捕獲的異常)時，進程將會安靜的退出，並返回結束碼1 。

使用 --headless，開發工具將不會被打開。

這能夠用於命令行腳本：

devtool render.js --quit --headless > result.png

--browser-field

一些模塊爲了更好的在瀏覽器中運行或許會提供一個入口點。當你須要這些模塊時，你可使用 --browser-field 來支持 package.json flag

例如，咱們可使用 xhr-request ，當帶有 "browser" 字段被引用時，這個模塊會使用 XHR。

const request = require('xhr-request');

request('https://api.github.com/users/mattdesl/repos', {
  json: true
}, (err, data) => {
  if (err) throw err;
  console.log(data);
});

在 shell 中執行:

npm install xhr-request --save
devtool app.js --browser-field

如今，咱們能夠在 Network 選項卡中審查請求:

--no-node-timers

默認狀況下，咱們提供全局的 setTimeout and setInterval，所以他們表現的像 Node.js 同樣(返回一個帶有 unref() and ref() 函數的對象)。

可是，你能夠禁用這個方法來改善對異步堆棧跟蹤的支持。

devtool app.js --no-node-timers

V8 Flags

在當前目錄，你能夠建立一個 .devtoolrc 文件來進行諸如 V8 flags 這樣的高級設置。

{
  "v8": {
    "flags": [
      "--harmony-destructuring"
    ]
  }
}

訪問這裏獲取更多細節

陷阱

因爲程序是在一個 Browser/Electron 環境中運行，而不是在一個真正的 Node.js 環境中。所以這裏有一些陷阱你須要注意。

對比

目前已經存在了一些 Node.js 調試器，因此你或許想知道他們之間的區別在哪。

WebStorm 調試器

WebStorm 編輯器裏面包含了一個很是強大的 Node.js 調試器。若是你已經使用 WebStorm 做爲你的代碼編輯器，那對你來講很棒。

可是，它缺乏一些 Chrome 開發者工具中的功能，例如:

• 一個豐富的互動的控制檯

• 異常時暫停

• 異步堆棧跟蹤

• Promise 檢查

• 分析

但由於你和你的 WebStorm 工做空間集成，因此你能夠在調試時修改和編輯你的文件。它也是運行在一個真正的 Node/V8 環境中，而不像 devtool 同樣。所以對於大部分的 Node.js 應用程序來講它更穩健。

iron-node

一個一樣基於 Electron 的調試器是iron-node。iron-node 包含了一個內置的命令來從新編譯原生插件，還有一個複雜的圖形界面顯示您的package.json 和 README.md。

而 devtool 更側重於把命令行、Unix 風格的管道和重定向和 Electron/Browser 的 API 看成有趣的用例。

devtool 提供各類各樣的功能來表現的更像 Node.js (例如 require.main, setTimeout 和 process.exit)，而且覆蓋了內部的 require 機制做爲 source maps，還有改進過的錯誤處理、斷點注入、以及 "browser" 字段的解決方案。

node-inspector

你或許也喜歡 node-inspector，一個使用遠程調試而不是構建在 Electron 之上的工具。

這意味着你的代碼將運行在一個真正的 Node 環境中，沒有任何 window 或其餘的 Browser/Electron API 來污染做用域並致使某些模塊出現問題。對於大型 Node.js 應用(即本地插件)來講它有一個強有力的支持，而且在開發者工具實例中擁有更多的控制權(便可以注入斷點和支持網絡請求)。

然而，因爲它從新實現了大量的調試技巧，所以對於開發來講感受可能比最新版的 Chrome 開發者工具要慢、笨拙和脆弱。它常常會崩潰，每每致使 Node.js 開發人員很無奈。

而 devtool 的目的是讓那些從 Chrome 開發者工具中轉過來的人以爲比較親切，並且也增長了像 Browser/Electron APIs 這樣的功能。