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

最新消息

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

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

[公告2018/04/22] 台北 Python + Excel VBA 金融資訊爬蟲課程，課程如網頁內容金融資訊爬蟲班：台北班 Python 金融資訊爬蟲、EXCEL VBA 金融資訊爬蟲。

[公告2019/01/08] 請注意：我再次重申，部落格文章的程式碼，是要提供各位參考與學習，一旦網頁改版請自行修改，別要求東要求西要我主動修改，你們用我寫東西賺錢了、交差了，請問有分我一杯羹嗎?既然賺錢沒分我，請問有什麼理由要求我修改，如果沒能力改，就花錢來找我上課。

[公告2019/12/01] 若各位有 Excel VBA 案子開發需求，歡迎與我聯繫，可接案處理。

[公告2020/05/22] 頁面載入速度慢，起因為部分JS來源(alexgorbatchev.com)失效導致頁面載入變慢，目前已做調整，請多見諒。

2018年1月14日星期日

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

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

Node.JS v6.3+。
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。