現已釋出！閱讀關於 11 月新增功能和修復的內容。

Visual Studio Code 除錯配置

對於複雜的除錯場景或應用程式，您需要建立一個 launch.json 檔案來指定偵錯程式配置。例如，指定應用程式入口點、附加到正在執行的應用程式或設定環境變數。

要了解有關 VS Code 中除錯的更多資訊，請參閱 Visual Studio Code 中的除錯。

提示

VS Code 中的 Copilot 可以幫助您為專案建立啟動配置。瞭解有關 使用 Copilot 生成啟動配置 的更多資訊。

啟動配置

對於簡單的應用程式或除錯場景，您可以在沒有特定除錯配置的情況下執行和除錯程式。使用 F5 鍵，VS Code 將嘗試執行您當前活動的檔案。

但是，對於大多數除錯場景，您需要建立除錯配置（啟動配置）。例如，指定應用程式入口點、附加到正在執行的應用程式或設定環境變數。建立啟動配置檔案也有益處，因為它允許您配置和儲存除錯設定詳細資訊與您的專案。

VS Code 將除錯配置資訊儲存在工作區（專案根資料夾）的 .vscode 資料夾中的 launch.json 檔案中，或者儲存在您的 使用者設定 或 工作區設定 中。

以下程式碼片段描述了一個用於除錯 Node.js 應用程式的示例配置

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}\\app.js"
    }
  ]
}

VS Code 還支援 複合啟動配置，用於同時啟動多個配置。

注意

即使您在 VS Code 中沒有開啟資料夾，也可以除錯簡單的應用程式，但無法管理啟動配置和設定高階除錯。

建立除錯配置檔案

建立初始 launch.json 檔案

  1. 在“執行和除錯”檢視中選擇“建立 launch.json 檔案”。

    launch configuration

  2. VS Code 會嘗試檢測您的除錯環境。如果無法檢測到，您可以手動選擇它。

    debug environment selector

    根據選擇的除錯環境，VS Code 會在 launch.json 檔案中建立一個入門配置。

  3. 在“資源管理器”檢視（⇧⌘E (Windows, Linux Ctrl+Shift+E)）中，您會注意到 VS Code 建立了一個 .vscode 資料夾並將 launch.json 檔案新增到了您的工作區。

    launch.json in Explorer

現在您可以編輯 launch.json 檔案以新增更多配置或修改現有配置。

向 launch.json 新增配置

要向現有的 launch.json 新增新配置，請使用以下技術之一：

  • 按“新增配置”按鈕，然後選擇一個程式碼片段來新增預定義的配置。
  • 如果游標位於 configurations 陣列內，請使用 IntelliSense。
  • 選擇“執行” > “新增配置”選單選項。

launch json suggestions

使用 AI 生成啟動配置

使用 VS Code 中的 Copilot，您可以加速為專案建立啟動配置的過程。要使用 Copilot 生成啟動配置：

  1. 使用 ⌃⌘I (Windows, Linux Ctrl+Alt+I) 開啟“聊天”檢視，或在標題欄的 Copilot 選單中選擇“開啟聊天”。

  2. 輸入 /startDebugging 聊天提示以生成除錯配置。

    或者，您也可以輸入自定義提示，例如為 express 應用生成除錯配置 #codebase。

    如果您的工作區中有不同語言的檔案，這會很有用。

    注意

    #codebase 聊天變數為 Copilot 提供了專案的上下文，這有助於它生成更準確的響應。

  3. 應用建議的配置，然後開始除錯。

使用啟動配置開始除錯會話

使用啟動配置開始除錯會話

  1. 在“執行和除錯”檢視的“配置下拉列表”中選擇名為“啟動程式”的配置。

    可用配置列表與 launch.json 檔案中的配置匹配。

    Screenshot that shows the launch configuration dropdown.

  2. 使用 F5 開始除錯會話，或在“執行和除錯”檢視中選擇“開始除錯”（播放圖示）。

或者，您可以透過“命令面板”（⇧⌘P (Windows, Linux Ctrl+Shift+P)）執行您的配置，方法是篩選“Debug: Select and Start Debugging”或鍵入'debug '並選擇您要除錯的配置。

啟動與附加配置的區別

在 VS Code 中，有兩種核心除錯模式：“啟動”和“附加”，它們處理兩種不同的工作流程和開發者群體。根據您的工作流程，可能不清楚哪種配置型別適合您的專案。

如果您來自瀏覽器開發者工具背景，您可能不習慣“從工具啟動”，因為您的瀏覽器例項已經開啟。當您開啟開發者工具時，您只是將開發者工具“附加”到已開啟的瀏覽器標籤頁。另一方面，如果您來自伺服器或桌面背景，讓編輯器為您“啟動”程序是很正常的，並且編輯器會自動將偵錯程式附加到新啟動的程序。

解釋啟動和附加之間區別的最佳方法是將啟動配置視為一個在 VS Code 附加到它之前以除錯模式啟動應用程式的“配方”，而附加配置是連線 VS Code 偵錯程式到已經執行的應用程式或程序的“配方”。

VS Code 偵錯程式通常支援以除錯模式啟動程式或附加到已執行的除錯模式程式。根據請求（attach 或 launch），需要不同的屬性，VS Code 的 launch.json 驗證和建議應該對此有所幫助。

launch.json 屬性

launch.json 屬性有很多，可以幫助支援不同的偵錯程式和除錯場景。一旦您為 type 屬性指定了值，您就可以使用 IntelliSense（⌃Space (Windows, Linux Ctrl+Space)）檢視可用屬性列表。啟動配置中可用的屬性因偵錯程式而異。

launch json suggestions

一個偵錯程式可用的屬性並不自動適用於其他偵錯程式。如果您在啟動配置中看到紅色波浪線，請將滑鼠懸停在上面以瞭解問題所在，並在啟動除錯會話之前嘗試修復它們。

以下屬性是每個啟動配置的必需項：

  • type - 此啟動配置要使用的偵錯程式型別。每個已安裝的除錯擴充套件都引入了一個型別：例如，node 用於內建 Node 偵錯程式，php 和 go 用於 PHP 和 Go 擴充套件。
  • request - 此啟動配置的請求型別。目前支援 launch 和 attach。
  • name - 在“除錯”啟動配置下拉列表中顯示的、使用者可讀的名稱。

以下是一些所有啟動配置都可用的可選屬性：

  • presentation - 使用 presentation 物件中的 order、group 和 hidden 屬性，您可以對“除錯”配置下拉列表和“除錯”快速選擇中的配置和複合配置進行排序、分組和隱藏。
  • preLaunchTask - 要在除錯會話開始之前啟動任務，請將此屬性設定為工作區 .vscode 資料夾中 tasks.json 中指定的任務的標籤。或者，可以將其設定為 ${defaultBuildTask} 以使用您的預設構建任務。
  • postDebugTask - 要在除錯會話結束時啟動任務，請將此屬性設定為工作區 .vscode 資料夾中 tasks.json 中指定的任務的名稱。
  • internalConsoleOptions - 此屬性控制除錯會話期間“除錯”控制檯面板的可見性。
  • debugServer - 僅限除錯擴充套件作者：此屬性允許您連線到指定埠，而不是啟動除錯介面卡。
  • serverReadyAction - 如果您想在除錯程式向除錯控制檯或整合終端輸出特定訊息時，在 Web 瀏覽器中開啟一個 URL。有關詳細資訊，請參閱下面的 除錯伺服器程式時自動開啟 URI 部分。

許多偵錯程式支援以下部分屬性：

  • program - 啟動偵錯程式時要執行的可執行檔案或檔案
  • args - 傳遞給要除錯的程式的引數
  • env - 環境變數（可以使用 null 值“取消定義”一個變數）
  • envFile - 包含環境變數的 dotenv 檔案的路徑
  • cwd - 用於查詢依賴項和其他檔案的當前工作目錄
  • port - 附加到正在執行的程序時的埠
  • stopOnEntry - 程式啟動時立即中斷
  • console - 要使用的控制檯型別，例如 internalConsole、integratedTerminal 或 externalTerminal

變數替換

VS Code 使常用路徑和其他值可作為變數提供，並支援在 launch.json 中的字串內進行變數替換。這意味著您不必在除錯配置中使用絕對路徑。例如，${workspaceFolder} 提供工作區資料夾的根路徑，${file} 提供活動編輯器中開啟的檔案，${env:Name} 提供環境變數“Name”。

您可以在 變數參考 中看到預定義變數的完整列表，或者透過在 launch.json 字串屬性內呼叫 IntelliSense 來檢視。

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

特定於平臺的屬性

VS Code 支援定義（例如，要傳遞給程式的引數）依賴於偵錯程式執行的作業系統的除錯配置設定。為此，請在 launch.json 檔案中放置一個特定於平臺的字面量，並在該字面量內指定相應的屬性。

以下示例顯示瞭如何在 Windows 上為程式傳遞不同的 "args"

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "args": ["myFolder/path/app.js"],
      "windows": {
        "args": ["myFolder\\path\\app.js"]
      }
    }
  ]
}

有效的作業系統屬性包括 Windows 的 "windows"，Linux 的 "linux"，以及 macOS 的 "osx"。在特定作業系統範圍內定義的屬性會覆蓋在全域性範圍內定義的屬性。

type 屬性不能放在特定於平臺的範圍內，因為在遠端除錯場景中，type 會間接確定平臺，這會導致迴圈依賴。

在以下示例中，除錯程式始終在入口點停止，除了 macOS

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "stopOnEntry": true,
      "osx": {
        "stopOnEntry": false
      }
    }
  ]
}

全域性啟動配置

您可以定義在所有工作區中都可用的啟動配置。要指定全域性啟動配置，請在您的 launch 使用者設定中新增一個啟動配置物件。此 launch 配置隨後會在您的工作區之間共享。例如：

"launch": {
    "version": "0.2.0",
    "configurations": [{
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${file}"
    }]
}

將輸入/輸出重定向到/從除錯目標

重定向輸入/輸出是偵錯程式或執行時特定的，因此 VS Code 沒有適用於所有偵錯程式的內建解決方案。

以下是兩種您可以考慮的方法：

  • 手動在終端或命令提示符中啟動要除錯的程式（“除錯目標”），並根據需要重定向輸入/輸出。確保您向除錯目標傳遞適當的命令列選項，以便偵錯程式可以附加到它。建立並執行一個“附加”除錯配置，該配置附加到除錯目標。

  • 如果使用的偵錯程式擴充套件可以在 VS Code 的整合終端（或外部終端）中執行除錯目標，您可以嘗試將 shell 重定向語法（例如，“<”或“>”）作為引數傳遞。

    這是一個示例 launch.json 配置：

    {
  "name": "launch program that reads a file from stdin",
  "type": "node",
  "request": "launch",
  "program": "program.js",
  "console": "integratedTerminal",
  "args": ["<", "in.txt"]
}

    此方法要求 < 語法透過偵錯程式擴充套件傳遞，並以未修改的形式出現在整合終端中。

複合啟動配置

啟動多個除錯會話的另一種方法是使用複合啟動配置。您可以在 launch.json 檔案中的 compounds 屬性中定義複合啟動配置。

使用 configurations 屬性列出要並行啟動的兩個或多個啟動配置的名稱。

可選地，指定一個 preLaunchTask 任務，該任務在individual 除錯會話啟動之前執行。布林標誌 stopAll 控制手動終止一個會話是否會停止所有複合會話。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Server",
      "program": "${workspaceFolder}/server.js"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Client",
      "program": "${workspaceFolder}/client.js"
    }
  ],
  "compounds": [
    {
      "name": "Server/Client",
      "configurations": ["Server", "Client"],
      "preLaunchTask": "${defaultBuildTask}",
      "stopAll": true
    }
  ]
}

複合啟動配置也顯示在啟動配置下拉選單中。

除錯伺服器程式時自動開啟 URI

開發 Web 程式通常需要開啟一個特定的 URL 在 Web 瀏覽器中，以便在偵錯程式中命中伺服器程式碼。VS Code 具有內建的“serverReadyAction”功能來自動化此任務。

這是一個簡單的 Node.js Express 應用程式的示例：

var express = require('express');
var app = express();

app.get('/', function(req, res) {
  res.send('Hello World!');
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!');
});

此應用程式首先為“/” URL 安裝一個“Hello World”處理程式，然後開始偵聽埠 3000 上的 HTTP 連線。該埠會在除錯控制檯中宣佈，通常，開發人員現在會在瀏覽器應用程式中鍵入 https://:3000。

serverReadyAction 功能使得能夠將結構化屬性 serverReadyAction 新增到任何啟動配置中，並選擇一個要執行的“操作”。

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",

  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "https://:%s",
    "action": "openExternally"
  }
}

在此，pattern 屬性描述了用於匹配宣佈埠的程式輸出字串的正則表示式。埠號的模式放在括號中，以便它可以作為正則表示式捕獲組可用。在此示例中，我們僅提取埠號，但也可以提取完整的 URI。

uriFormat 屬性描述瞭如何將埠號轉換為 URI。第一個 %s 被匹配模式的第一個捕獲組替換。

生成的 URI 然後在 VS Code 外部（“外部”）使用為 URI 方案配置的標準應用程式開啟。

透過 Microsoft Edge 或 Chrome 觸發除錯

或者，可以將 action 設定為 debugWithEdge 或 debugWithChrome。在此模式下，可以新增一個 webRoot 屬性，該屬性會傳遞給 Chrome 或 Microsoft Edge 除錯會話。

為了簡化起見，大多數屬性都是可選的，我們使用以下回退值：

  • pattern: "listening on.* (https?://\\S+|[0-9]+)"，它匹配常用的訊息“listening on port 3000”或“Now listening on: https://:5001”。
  • uriFormat: "https://:%s"
  • webRoot: "${workspaceFolder}"

觸發任意啟動配置

在某些情況下，您可能需要為瀏覽器除錯會話配置更多選項，或者使用完全不同的偵錯程式。您可以透過將 action 設定為 startDebugging，並將 name 屬性設定為當 pattern 匹配時要啟動的啟動配置的名稱來實現此目的。

命名的啟動配置必須與具有 serverReadyAction 的配置在同一檔案或資料夾中。

這是 serverReadyAction 功能的實際應用：

後續步驟

  • 任務 - 描述如何使用 Gulp、Grunt 和 Jake 執行任務以及如何顯示錯誤和警告。
  • 變數參考 - 描述 VS Code 中可用的變數。

常見問題

在“執行和除錯”檢視的下拉列表中看不到任何啟動配置。怎麼回事？

最常見的問題是您沒有設定 launch.json，或者該檔案中存在語法錯誤。另外，您可能需要開啟一個資料夾，因為無資料夾除錯不支援啟動配置。

12/10/2025
© . This site is unofficial and not affiliated with Microsoft.