iInfo 資訊交流: 前端網頁除錯(2) --- Node.JS 搭配 Visual Studio Code 進行除錯

最新消息

[公告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月16日 星期二

前端網頁除錯(2) --- Node.JS 搭配 Visual Studio Code 進行除錯

Visual Studio Code 是微軟開發,它功能介於編輯器與程式開發IDE之間,對於工程師來說是一個不錯的工具,今天就用 Visual Studio Code 來進行 Node.JS 除錯。
滑鼠右鍵,用 VSCode 開啟 123 資料夾。

滑鼠右鍵快捷設定,可在 Visual Studio Code 安裝勾選加入。

或已經安裝 Visual Studio Code 的環境上,將以下註冊機碼存於 OpenWithCode.reg。
Windows Registry Editor Version 5.00
; Open files
[HKEY_CLASSES_ROOT\*\shell\Open with VS Code]
@="Edit with VS Code"
"Icon"="C:\\Program Files\\Microsoft VS Code\\Code.exe,0"
[HKEY_CLASSES_ROOT\*\shell\Open with VS Code\command]
@="\"C:\\Program Files\\Microsoft VS Code\\Code.exe\" \"%1\""
; This will make it appear when you right click ON a folder
; The "Icon" line can be removed if you don't want the icon to appear
[HKEY_CLASSES_ROOT\Directory\shell\vscode]
@="Open Folder as VS Code Project"
"Icon"="\"C:\\Program Files\\Microsoft VS Code\\Code.exe\",0"
[HKEY_CLASSES_ROOT\Directory\shell\vscode\command]
@="\"C:\\Program Files\\Microsoft VS Code\\Code.exe\" \"%1\""
; This will make it appear when you right click INSIDE a folder
; The "Icon" line can be removed if you don't want the icon to appear
[HKEY_CLASSES_ROOT\Directory\Background\shell\vscode]
@="Open Folder as VS Code Project"
"Icon"="\"C:\\Program Files\\Microsoft VS Code\\Code.exe\",0"
[HKEY_CLASSES_ROOT\Directory\Background\shell\vscode\command]
@="\"C:\\Program Files\\Microsoft VS Code\\Code.exe\" \"%V\""

使用以下程式碼來進行VSCode除錯。
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');
});

VSCode環境設定:
如圖步驟操作,由VSCode產生 Debug 設定檔 launch.json。

launch.json 中,Visual Studio Code 提供兩種 Debug 模式。
一種是「Launch」,啟動一個獨立的具有 debug 模式的程式。
一種是「Attach」,附加於(也可以說「監聽」) 一個已經啟動的程式 (必須已經開啟 Debug 模式)。



執行偵錯,在沒有指定 port 前,Visual Studio Code 偵錯會隨機挑選可用的 port。

執行偵錯,指定 port = 9229,偵錯就都會以 9229 為除錯的 port。


也可在同一份 launch.json 設定檔,添加「Attach」除錯模式。

關於 launch.json 設定檔內容,可參考微軟官網 visualstudio 的說明。

參考資料: