使用 Visual Studio Code 調試 Express 應用
已完成
15 分鐘
Visual Studio Code 内置了對 Node.js 運作時的調試支援，可以調試 JavaScript、TypeScript 和其他許多轉譯為 JavaScript 的語言。
IntelliSense
内置的 IntelliSense 功能提供了代碼完成、參數資訊、成員清單等。 例如，可以在 Node app.js 檔案中請求 HTTP，并在鍵入的同時擷取針對 http 類的完整 IntelliSense。
在 Visual Studio Code 中，打開上一單元中的 HelloWorld Express 項目(如果已關閉的話)。 在狀态欄中查找“WSL:Ubuntu”，確定 Visual Studio Code 連接配接到 WSL。 如果 Visual Studio Code 在 Windows 上運作，則可以運作“Remote-WSL:Reopen Folder in WSL”以切換到 WSL。
Visual Studio Code 将記住上一會話的狀态，并在 WSL 中重新打開你使用的最後一個檔案夾(如果你此前曾在使用它)。 若要在 Windows 中啟動新的執行個體，可以通過“檔案” > “關閉遠端連接配接”以為空編輯器關閉遠端連接配接，或者運作Remote-WSL: 以在 Windows 中打開目前項目。
打開 Express 項目中的 app.js 檔案，将滑鼠懸停在行 var app = express(); 中的“express”一詞之上。 IntelliSense 彈出視窗将指出此函數可建立 Express 應用程式。
使用 launch.json 檔案配置項目以進行調試
若要開始調試 Express 應用，首先需要建立名為 launch.json 的調試器配置檔案。 當你打開目錄時，Visual Studio Code 将查找多個檔案。 這些檔案用于自定義 Visual Studio Code 的行為方式。 Launch.json 是其中一個檔案，用于自定義調試器的打開方式。
選擇 Visual Studio Code 活動欄(左側)中的“調試”圖示，然後選擇“調試”視圖頂部的“配置”圖示(齒輪)。 (在“無配置”旁邊，應有一個紅點，訓示尚未建立任何配置。)這會在項目根目錄中的 .vscode 檔案夾内建立 launch.json 檔案。 (此檔案可能位于 ./HelloWorld/.vscode/launch.json 中。)
若要啟動調試，請選擇“啟動調試”，或按 F5。 打開“調試控制台”視窗 (Ctrl+Shift+Y)，以檢視調試資訊。 此視窗現在應報告已附加調試器。
停止調試。 (按 Shift+F5 或菜單中的“停止”按鈕。)
接下來，輸入一些代碼，以嘗試進行調試測試。
在項目的 routes 檔案夾中，打開 index.js 檔案。 可以看到，index.js 檔案需要 Express 子產品，設定路由器，然後訓示路由器對 Express 應用的首頁(索引)執行 get 操作，并将它命名為“Express”。
定義變量 platform，并向它提供一組值。 複制以下代碼并将其粘貼到定義路由器和使用路由器的行之間(如螢幕截圖中所示)。
var platform = ["Linux", "Windows", "Unix/MacOS"];
使用以下代碼更改路由器顯示的标題。 我們希望它使用數組中的變量 1：
router.get('/', function(req, res, next) {
res.render('index', { title: platform[1] });
});
通過添加下面的代碼，使用控制台日志 platform 函數确認正在運作的平台：
console.log("You're running on: ", process.platform);
儲存更改，然後在終端視窗中輸入 npm start。 這會啟動 Express 應用。 打開浏覽器，轉到 localhost:3000，以檢視正在運作的應用的首頁。
糟糕！ 可以看到，控制台日志訓示我們正在運作 Linux，但頁面上顯示正在 Windows 上運作代碼。 接下來将對此進行調試，看看出了什麼問題！
按 Ctrl+C，以停止 npm 在終端運作應用。
為了更好地了解此問題，我們将添加另一個控制台日志，以列出 platform 變量數組中的三個選項：
console.log("Your platform is either: ", platform[1], platform[2], platform[3]);
在定義 platform 變量之後，但在路由器擷取首頁之前，添加 console.log。 在此處放置斷點，以便讓腳本在首頁還沒有呈現時停止。 可以通過按 F9 鍵來添加斷點。 将會看到已添加斷點的行旁邊的紅點。
運作調試器 (F5)。 将看到“調試控制台”視窗訓示 platform 數組包含 Windows、Unix/MacOS、未定義。
找到 bug 了！ JavaScript 從 0 開始為數組編号。 假設數組清單中的項 1 是 Linux。 此 bug 解釋了為什麼 Web 應用标題會改列為“Windows”。
将标題呈現代碼更改為以下代碼：
res.render('index', { title: platform[0] });
使用 npm start 從終端重新運作應用。 打開浏覽器，然後轉到 localhost:3000。 (如果浏覽器還在打開，則對其進行重新整理。)現在應看到 Web 應用的标題更新為“Linux”。 好哇！
你已成功在 Windows 計算機上使用 Visual Studio Code 調試在 Linux Ubuntu 發行版本中運作的 Node.js Express 應用！