前端網頁除錯(1) --- Node.JS 搭配 Chrome 開發人員工具進行除錯

Node.JS 除錯對前端工程師一點也不陌生。在 Node.JS v6.3版之前，除錯方式為 node-inspector，到了 v6.3 版後，Node.JS 使用 V8 Debugger Protocol 可在 Chrome 開發人員工具上進行除錯，以下就說明除錯環境的建立，有經驗的前端工程師朋友，如果對於小弟所寫文章有誤，煩請多提供指教，謝謝。
環境需求，如下，或參考 NodeJS 官網說明：

1. Node.JS v6.3+。
2. Chrome  v55+。

將以下程式碼存成 test.js 用以進行偵錯：

const http = require('http');
const server = http.createServer(function (req, res) {
  res.writeHead(200, { 'content-type': 'text/html' });
  var context = '<h1>It works!</h1>';
  res.end(context);
});
server.listen(3000, function () {
  console.log('Listening on http://localhost:3000');
});

在 Command Line 中輸入以下指令執行 test.js。

node test.js

執行畫面：

這時回傳一個可查看 test.js 執行結果的網址， 將 http://localhost:3000 貼到 Chrome 上，可即時查看程式執行的畫面。

要結束執行，在 Command Line 中點一下，按下鍵盤的 Ctrl + C，結束程式執行。

接著進行程式偵錯，先在 Chrome 網址列上輸入 chrome://inspect 開啟 Chorme DevTools 畫面。

接著在 Command Line 輸入以下指令執行啟用偵錯 test.js。

node --inspect test.js

這時在 chrome://inspect 畫面中可見到 test.js 被執行起來。

點選 Open dedicated DevTools for Node 連結開啟偵錯視窗。

或是安裝 Chrome 延伸的應用程式 NIM，在每次執行偵錯時，會自動幫我們開啟偵錯視窗。

如果要讓程式執行時，在第一行停下來，可使用以下的指令。

node --inspect --deubg-brk test.js

參考資料：

• github - README
• Nodejs 调试方法
• Node.js 应用的可视化调试与性能分析
• Node.js 性能调优之调试篇(一)——Chrome DevTools
• 在 Chrome DevTools 中并行调试 Node.js 和浏览器 JavaScript