教學課程：在 Visual Studio 中建立 Node.js 和 Express 應用程式

本文示範如何使用 Visual Studio 來建置使用 Express 架構的基本 Node.js Web 應用程式。

Node.js 是一個執行 JavaScript 程式碼的伺服器端 JavaScript 執行環境。預設情況下，Node.js 使用 npm 套件管理器來方便使用和共享 Node.js 原始碼庫。 npm 套件管理器簡化了函式庫的安裝、更新和卸載。

Express 是一個伺服器 Web 應用程式框架，Node.js 用來建立 Web 應用程式。使用 Express，有許多不同的方法可以建立使用者介面。本教學課程中提供的實作會使用 Express 應用程式產生器的預設範本引擎（稱為 Pug）來轉譯前端。

在本教學課程中，您會：

使用 JavaScript 範本建立 Node.js 應用程式
建置應用程式並檢查執行中的程式
在 Visual Studio 偵錯工具中偵錯應用程式

先決條件

Visual Studio 2022 17.12 版 或更新版本，已安裝 ASP.NET 和 Web 開發 工作負載。
- 若要免費安裝 Visual Studio，請移至 Visual Studio 下載頁面。
- 如果您已經有 Visual Studio，您可以從互動式開發環境（IDE）內安裝工作負載：
  1. 選取工具>取得工具和功能。
  2. 在 Visual Studio 安裝程式中，選取 [工作負載] 索引標籤[]。
  3. 選取 ASP.NET 和 Web 開發 工作負載，然後選取 [ 修改]。
  4. 遵循提示並完成安裝。
Node.js 搭配 npm 套件管理器和 npx 套件。

您可以使用命令 node -v 檢查您的 Node.js 安裝。命令輸出應顯示已安裝的 Node.js版本，例如 v23.4.0。如需相關資訊，請參閱下載及安裝 Node.js 和 npm。
- npm 套件管理員包含在 Node.js 安裝中。使用命令 npm -v 驗證安裝。命令輸出應顯示已安裝的套件管理員版本，例如 10.9.2。
- npx 套件是 npm CLI 的一部分。使用命令確認 npx -v 套件安裝。命令輸出應顯示已安裝的套件版本，例如 10.9.2。

建立應用程式

請遵循下列步驟，在 Visual Studio 中建立新的 Node.js 應用程式：

在 Visual Studio 開始視窗（檔案>開始視窗），選取 [建立新專案]：
在 [搜尋 ] 方塊中，輸入 Express，然後在結果清單中選取 JavaScript Express 應用程式 範本：
選取 下一步 以繼續前往設定頁面。
輸入新應用程式的 專案名稱 和 解決方案名稱 。選擇預設位置，或瀏覽至您環境中的其他路徑。
選取 [建立]，以建立新的 Node.js 專案。

Visual Studio 會建立新的專案，並在 [方案總管] 中開啟項目階層。

檢視您的專案屬性

預設專案設定可讓您建置和偵錯專案。您可以根據需要更改設置。

在 [方案總管] 中，以滑鼠右鍵按一下專案，然後選取 [屬性]。 您也可以選取 Project>Express 專案屬性以存取這些屬性。
在 [專案屬性] 窗格中，移至 [建置] 區段，並視需要設定屬性。
若要設定偵錯設定，請選取 [偵錯>ExpressProject 偵錯屬性]。

備註

launch.json 檔案會儲存與「偵錯」工具列中「啟動」動作相關聯的啟動設定。目前， launch.json 必須位於 .vscode 資料夾中。

建置您的專案

選取 [建置>建置解決方案] 來建置您的專案。

啟動您的應用程式

在工具列中選取 Ctrl + F5 或 [不偵錯而啟動] （綠色箭號外框圖示），以啟動您的新應用程式。

終端機隨即開啟，並顯示正在執行的命令：

> expressproject@0.0.0 start
> node ./bin/www

GET / 200 29342.066 ms - 170
GET /stylesheets/style.css 200 18.967 ms - 111

備註

檢查終端機輸出是否有訊息。另請檢查 Visual Studio 中的 [輸出] 窗格。請留意更新 Node.js版本的說明。

當應用程式成功啟動時，瀏覽器視窗會開啟，顯示 Express 應用程式：

顯示瀏覽器中正在執行的 Express 應用程式的螢幕擷取畫面。

偵錯您的應用程式

現在您已準備好探索應用程式除錯的方法。

如果您的應用程式仍在執行中，請選取 Shift + F5 以結束目前的工作階段，或選取 [偵錯] 工具列中的 [停止 ] （紅色方塊圖示）。您可能會注意到，結束工作階段會關閉顯示應用程式的瀏覽器，但執行 Node 進程的終端機視窗會保持開啟狀態。現在，請關閉所有未完成的視窗。在本文稍後，您將檢視一些情境，了解在何時可能會想要讓 Node.js 程序保持運行。

偵錯 Node 進程

[開始] 動作左側的下拉式清單會顯示應用程式可用的開始選項：

localhost （邊緣）
本地主機（Chrome）
啟動 ExpressProject
啟動節點和瀏覽器

請遵循下列步驟來偵錯應用程式的節點程式：

在 「開始」 下拉式清單中，選取 「啟動節點和瀏覽器」。
在 [方案總管] 中，展開路由資料夾，然後開啟 index.js 檔案。
在程式碼編輯器中，在 index.js 檔案中設定中斷點：
1. 找到程式碼陳述式 res.render('index', { title: 'Express' });。
2. 在左側邊欄中選取語句所在的行。 Visual Studio 會在邊緣新增紅色圓圈，以表示設定的中斷點。
小提示

您也可以將游標放在程式碼行上，然後選取 F9 切換該行的斷點。
在偵錯工具列中選取 F5 或 [ 開始偵錯 ] （綠色箭號圖示），在偵錯工具中啟動您的應用程式。

Visual Studio 會開始執行您的應用程式。當調試程式到達您的設定斷點時，偵錯程式會暫停。
暫停執行時，您可以檢查應用程式的狀態。將滑鼠停留在變數上並檢查其屬性。
當您準備好繼續時，請選取 F5。處理繼續進行，您的應用程式會在瀏覽器中開啟。

這次，如果您選取 [停止]，請注意瀏覽器和終端機視窗都會關閉。若要瞭解行為不同的原因，請仔細查看 launch.json 檔案。

檢查 launch.json 檔案

請遵循下列步驟來檢查專案的 launch.json 檔案：

在 [方案總管] 中，展開 .vscode 資料夾，然後開啟 launch.json 檔案。

小提示

如果您在 [方案總管] 中看不到 .vscode 資料夾，請選取 [方案總管] 工具列中的 [顯示所有檔案] 動作。
在程式碼編輯器中查看檔案。如果您有使用 Visual Studio Code 的經驗， launch.json 檔案可能看起來很熟悉。此專案中的 launch.json 檔案會對應至 Visual Studio Code 所用來表示用於偵錯的啟動組態的檔案。每個項目都會指定一或多個要除錯的目標。
檢查檔案中的前兩個項目。這些項目定義了不同網際網路瀏覽器的行為：
```
    {
      "name": "localhost (Edge)",
      "type": "edge",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public"
    },
    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public"
    }
```
支援的瀏覽器會以屬性 type 表示。如果您啟動應用程式，只使用瀏覽器類型作為唯一的偵錯目標，Visual Studio 只會偵錯前端瀏覽器程式。節點進程會在沒有附加偵錯工具的情況下啟動。 Visual Studio 不會綁定 在 Node.js 進程中設定的任何中斷點。

備註

目前， edge 和 chrome 是唯一支援的偵錯瀏覽器類型。

當您結束階段作業時，根據設計，節點處理程序會繼續執行。當瀏覽器是除錯目標時，程序會刻意保持執行狀態。如果工作僅在前端完成，則讓後端進程持續運行可以簡化開發工作流程。

在本節開始時，您關閉了滯留的終端機視窗，以便在節點處理程序中設定岔斷點。若要讓 Visual Studio 偵錯節點進程，必須在附加偵錯工具的情況下重新啟動進程。如果不可偵錯的節點進程保持執行狀態，則嘗試在偵錯模式下啟動節點進程（而不重新配置埠） 會失敗。

檢閱 launch.json 檔案中的第三個項目。此項目指定 node 為偵錯型別：

    {
      "name": "Launch ExpressProject",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}/bin",
      "program": "${workspaceFolder}/bin/www",
      "stopOnEntry": true
    }

第三個項目只會在偵錯模式下啟動節點進程。 Visual Studio 不會啟動瀏覽器。

檢查 launch.json 檔案中的第四個項目，該專案定義複合啟動配置：
```
    {
      "name": "Launch Node and Browser",
      "configurations": [
        "Launch ExpressProject",                   
        "localhost (Edge)"
      ]
    }
```
此複合設定與 Visual Studio Code 複合啟動設定相同。當您選取此組態時，您可以同時偵錯前端和後端。請注意，定義只會參考節點和瀏覽器程序的個別啟動組態。

您可以在啟動組態中使用許多其他屬性。例如，您可以隱藏某個組態，將其從「開始」下拉式清單中移除，但可以透過在presentation物件中將hidden屬性設為true來允許對該組態的引用：
```
    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public",
      "presentation": {
        "hidden": true
      }
    }
```
使用支援的屬性來設定選項，以增強您的偵錯體驗。目前僅支援啟動組態。任何嘗試使用連接組態都會導致部署失敗。如需詳細資訊，請參閱選項。

意見反應

此頁面對您有幫助嗎？

Last updated on 2025-11-11