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

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。