在 Chrome 開發人員工具中調試 node.js

標籤：profiling   輸出   文法   伺服器   electron   orm   word   condition   令行   

命令列工具 devtool ，它可以在 Chrome 的開發人員工具中運行 Node.js 程式。

下面的記錄顯示了在一個 HTTP 伺服器中設定斷點的情況。

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

你可以使用 npm 來安裝它:

npm install -g devtool

在某種程度上，我們可以用它來作為 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

run a Node script

我們可以在通用模組和應用程式的開發中使用 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 這樣的功能。 

在 Chrome 開發人員工具中調試 node.js