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

最新消息

[公告2014/05/30] 如有需要將部落格中,任何一篇文章的程式碼使用在商業用途,請與我聯繫。

[公告2015/04/26] Line版的 iInfo程式與投資應用 群組已上線想加入的朋友們,請先查看 "入群須知" 再與我聯繫 Line : aminwhite5168,加入請告知身分與回答 "入群須知" 的問題。

[公告2017/02/20] 近來有網友詢問 MultiCharts 與 Excel 畫冰火能量圖 (8)MultiCharts 與Excel 畫冰火能量圖(11) --- 更名「台股儀表板」 文章中教學檔案取得方式,有興趣的朋友可透過 Line了解詳情 (請勿以為是免費分享),Line : aminwhite5168。

[公告2018/04/22] 台北 Python + Excel VBA 金融資訊爬蟲課程,於 7/21、7/22 兩天開課,課程如網頁內容 金融資訊爬蟲班:台北班 Python 金融資訊爬蟲、EXCEL VBA 金融資訊爬蟲,5/30 前早鳥優惠票,請盡快把握機會,歡迎券商、大專院校邀約講座。

[公告2018/06/01] 台指能量儀表板教學課程,課程如網頁內容 台北班:台指能量儀表板

2018年1月14日 星期日

前端網頁除錯(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


參考資料: