用Chrome 開發者工具中調試 node.js程序
來自： http://blog.sqrtthree.com/2016/02/29/debugging-nodejs-in-chrome-devtools/
這篇文章介紹了一種在 Chrome 開發者工具里面開發、調試和分析 Node.js 應用程序的新方法。
devtool
最近我一直在開發一個命令行工具 devtool ，它可以在 Chrome 的開發者工具中運行 Node.js 程序。
下面的記錄顯示了在一個 HTTP 服務器中設置斷點的情況。
該工具基于 Electron 將 Node.js 和 Chromium 的功能融合在了一起。它的目的在于為調試、分析和開發 Node.js 應用程序提供一個簡單的界面。
你可以使用 npm 來安裝它:
npm install -g devtool
</div>
在某種程度上，我們可以用它來作為 node shell 命令的替代品。例如，我們可以這樣打開一個 REPL (譯者注: REPL 全稱為”Read-Eval-Print Loop”，是一個簡單的、交互式的編程環境)。
devtool
</div>
這將啟動一個帶有 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
</div>
run a Node script
我們可以在通用模塊和應用程序的開發中使用 devtool ，來代替像 nodemon 這樣目前已經存在的工具。
devtool app.js --watch
</div>
這行命令將會在 Chrome 開發者工具中的控制臺中啟動我們的 app.js ， 通過 --watch 參數，我們保存的文件將(自動)重新載入到控制臺。
點擊 app.js:1 鏈接，程序將會在 Sources 標簽中把我們帶到與之相關的那一行。
在 Sources 標簽中，你也可以敲擊 Cmd/Ctrl + P 按鍵在所有依賴的模塊中進行快速搜索。你甚至可以審查和調試內置模塊，比如 Node.js 中的那些。你也可以使用左手邊的面板來瀏覽模塊。
因為我們能夠訪問 Sources 標簽，所以我們可以用它來調試我們的應用程序。你可以設置一個斷點，然后重新加載調試器( Cmd/Ctrl + R )，或者你也可以通過 --break 標記來設置一個初始斷點。
devtool app.js --break
</div>
下面是一些對于那些學習 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');
});
</div>
現在我們在這個文件上運行 devtool :
devtool app.js
</div>
執行之后，我們可以在 Profiles 標簽中看到結果。
我們可以使用右邊的鏈接來查看和調試執行頻率較高的代碼路徑。
高級選項
Chrome 會不斷的向他們的開發者工具中推送新功能和實驗，例如 Promise Inspector 。你可以通過點擊右上角的三個點，然后選擇 Settings -> Experiments 來開啟他們。
一旦啟用，你就可以通過敲擊 Escape 按鍵來調出一個帶有 Promises 監視器的面板。
提示: 在 Experiments 界面，如果你敲擊 Shift 鍵 6 次，你會接觸到一些甚至更多的實驗性（不穩定）的功能。
--console
你可以重定向控制臺輸出到終端中( process.stdout 和 process.stderr )。也允許你通過使用管道將它導入到其他進程中，例如 TAP prettifiers。
devtool test.js --console | tap-spec
</div>
-- 和 process.argv
你的腳本可以像一個普通的 Node.js 應用那樣解析 process.argv 。如果你在 devtool 命令中傳遞一個句號( -- )，它后面的所有內容都會被當做一個新的 process.argv 。例如:
devtool script.js --console -- input.txt
</div>
現在，你的腳本看起來像這樣:
var file = process.argv[2];
console.log('File: %s', file);
</div>
輸出:
File: input.txt
</div>
--quit 和 --headless
使用 --quit ，當遇到了一個錯誤(如語法錯誤或者未捕獲的異常)時，進程將會安靜的退出，并返回結束碼 1 。
使用 --headless ，開發工具將不會被打開。
這可以用于命令行腳本：
devtool render.js --quit --headless > result.png
</div>
--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);
});
</div>
在 shell 中執行:
npm install xhr-request --save devtool app.js --browser-field
</div>
現在，我們可以在 Network 選項卡中審查請求:
--no-node-timers
默認情況下，我們提供全局的 setTimeout and setInterval ，因此他們表現的像 Node.js 一樣(返回一個帶有 unref() and ref() 函數的對象)。
但是，你可以禁用這個方法來改善對異步堆棧跟蹤的支持。
devtool app.js --no-node-timers
</div>
V8 Flags
在當前目錄，你可以創建一個 .devtoolrc 文件來進行諸如 V8 flags 這樣的高級設置。
{
"v8": {
"flags": [
"--harmony-destructuring"
]
}
}
</div>
訪問 這里 獲取更多細節
由于程序是在一個 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 這樣的功能。
本文根據 MATT DESLAURIERS 的《 Debugging Node.js in Chrome DevTools 》所譯，整個譯文帶有自己的理解與思想，如果譯得不好或有不對之處還請同行朋友指點。如需轉載此譯文，需注明英文出處： Debugging Node.js in Chrome DevTools
您的鼓勵是作者寫作最大的動力
如果您認為本網站的文章質量不錯，讀后覺得收獲很大，不妨小額贊助我一下，讓我有動力繼續寫出高質量的文章：我的支付寶賬號是 sqrtthree@foxmail.com , 點擊查看二維碼
</div>