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

最新消息

[公告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月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。