使用 Visual Studio Code 進行程式碼除錯

Visual Studio Code 對除錯各種型別的應用程式提供了豐富的支援。VS Code 內建了對 JavaScript、TypeScript 和 Node.js 的除錯支援。在 Visual Studio Marketplace 中，您可以找到各種除錯擴充套件，為 VS Code 新增對其他語言和執行時環境的除錯支援。

本文件介紹了 VS Code 的除錯功能以及如何在 VS Code 中開始除錯。您還將瞭解如何使用 VS Code 中的 Copilot 加速除錯配置的設定和除錯會話的啟動。

下面的影片演示瞭如何在 VS Code 中開始除錯。

偵錯程式使用者介面

下圖顯示了偵錯程式使用者介面的主要元件

1. 執行和除錯檢視：顯示與執行、除錯和管理除錯配置設定相關的所有資訊。
2. 除錯工具欄：包含最常見的除錯操作按鈕。
3. 除錯控制檯：允許檢視和與偵錯程式中執行的程式碼的輸出進行互動。
4. 除錯側邊欄：在除錯會話期間，允許您與呼叫堆疊、斷點、變數和監視變數進行互動。
5. 執行選單：包含最常見的執行和除錯命令。

開始除錯之前

1. 從 Visual Studio Marketplace 為您的語言或執行時安裝除錯擴充套件。

   VS Code 內建了對 JavaScript、TypeScript 和 Node.js 的除錯支援。

2. 為您的專案定義除錯配置。

   對於簡單的應用程式，VS Code 會嘗試執行和除錯當前活動的檔案。對於更復雜的應用程式或除錯場景，您需要建立一個 launch.json 檔案來指定偵錯程式配置。獲取有關建立 除錯配置的更多資訊。

   提示

   VS Code 中的 Copilot 可以幫助您生成 launch.json 檔案。有關更多資訊，請參閱 使用 Copilot 生成除錯配置。

3. 在程式碼中設定斷點。

   斷點是您可以在程式碼行上設定的標記，用於告知偵錯程式在執行到該行時暫停。您可以透過單擊編輯器中行號旁邊的裝訂線來設定斷點。

   有關斷點的更多資訊，請參閱 處理斷點。

啟動除錯會話

要在 VS Code 中啟動除錯會話，請執行以下步驟

1. 開啟包含要除錯的程式碼的檔案。

2. 按 F5 鍵啟動除錯會話，或在執行和除錯檢視（workbench.view.debug）中選擇執行和除錯。

   

   對於更復雜的除錯場景，例如附加到正在執行的程序，您需要建立一個 launch.json 檔案來指定偵錯程式配置。獲取有關 除錯配置的更多資訊。

3. 從可用偵錯程式列表中選擇要使用的偵錯程式。

   VS Code 會嘗試執行和除錯當前活動的檔案。對於 Node.js，VS Code 會檢查 package.json 檔案中的 start 指令碼以確定應用程式的入口點。

4. 除錯會話開始時，將顯示除錯控制檯面板並顯示除錯輸出，並且狀態列會改變顏色（預設顏色主題為橙色）。

   

5. 狀態列中的除錯狀態顯示活動的除錯配置。選擇除錯狀態可以更改活動的啟動配置並開始除錯，而無需開啟執行和除錯檢視。

   

除錯操作

一旦除錯會話開始，除錯工具欄將出現在視窗頂部。工具欄包含控制除錯會話流程的操作，例如逐行執行程式碼、暫停執行和停止除錯會話。

下表描述了除錯工具欄中可用的操作

如果您的除錯會話涉及多個目標（例如，客戶端和伺服器），除錯工具欄將顯示會話列表並允許您在它們之間切換。

Breakpoints

斷點是用於在特定點暫停程式碼執行的特殊標記，以便您可以檢查應用程式在該點的狀態。VS Code 支援多種型別的斷點。

設定斷點

要設定或取消設定斷點，請單擊編輯器邊距或在當前行上使用 F9。

• 編輯器邊距中的斷點通常顯示為實心紅色圓圈。
• 停用的斷點顯示為實心灰色圓圈。
• 當除錯會話啟動時，無法與偵錯程式註冊的斷點將變為灰色空心圓圈。如果原始碼在沒有即時編輯支援的除錯會話執行時被編輯，也可能發生同樣的情況。

可選地，可以透過啟用 debug.showBreakpointsInOverviewRuler 設定在編輯器的概覽標尺中顯示斷點。

要更精細地控制斷點，請使用執行和除錯檢視的斷點部分。此部分列出了程式碼中的所有斷點，並提供額外的操作來管理它們。

斷點型別

條件斷點

VS Code 的一項強大除錯功能是能夠根據表示式、命中次數或兩者的組合設定條件。

• 表示式條件：當表示式求值為 true 時，將命中該斷點。
• 命中次數：命中次數控制斷點需要被命中多少次才能中斷執行。命中次數是否被尊重以及表示式的確切語法可能因偵錯程式擴充套件而異。
• 等待斷點：當命中另一個斷點時，斷點將被啟用（觸發斷點）。

新增條件斷點

1. 建立條件斷點

   • 右鍵單擊編輯器邊距，然後選擇新增條件斷點。
   • 使用命令面板中的新增條件斷點命令（⇧⌘P (Windows, Linux Ctrl+Shift+P)）。

2. 選擇要設定的條件型別（表示式、命中次數或等待斷點）。

   

向現有斷點新增條件

1. 編輯現有斷點

   • 右鍵單擊編輯器邊距中的斷點，然後選擇編輯斷點。
   • 在執行和除錯檢視的斷點部分，選擇現有斷點旁邊的鉛筆圖示。

2. 編輯條件（表示式、命中次數或等待斷點）。

如果偵錯程式不支援條件斷點，則“新增條件斷點”和“編輯條件”操作將不可用。

觸發斷點

觸發斷點是一種條件斷點，它在命中另一個斷點後啟用。當診斷程式碼中僅在滿足特定先決條件後才會發生的故障情況時，它們可能很有用。

可以透過右鍵單擊字形邊距，選擇 新增觸發斷點，然後選擇哪個其他斷點啟用此斷點來設定觸發斷點。

內聯斷點

內聯斷點僅在執行到達與內聯斷點關聯的列時才會命中。這對於除錯包含單行中多個語句的最小化程式碼很有用。

可以使用 ⇧F9 (Windows, Linux Shift+F9) 或在除錯會話期間透過上下文選單來設定內聯斷點。內聯斷點在編輯器中內聯顯示。

內聯斷點也可以帶有條件。可以透過編輯器左邊距的上下文選單編輯行上的多個斷點。

函式斷點

偵錯程式可以透過指定函式名稱來建立斷點，而不是直接將斷點放置在原始碼中。當原始碼不可用但函式名稱已知時，此功能非常有用。

要建立函式斷點，請選擇斷點部分標題中的+按鈕，然後輸入函式名稱。函式斷點在斷點部分顯示為紅色三角形。

資料斷點

如果偵錯程式支援資料斷點，則可以從變數檢視中的上下文選單設定它們。值更改/讀取/訪問時中斷命令會新增一個數據斷點，該斷點在底層變數的值更改/讀取/訪問時觸發。資料斷點在斷點部分顯示為紅色六邊形。

日誌點

日誌點是一種斷點變體，它不會中斷偵錯程式，而是將訊息記錄到除錯控制檯。日誌點可以透過避免在程式碼中新增或刪除日誌語句來幫助您節省時間。

日誌點由菱形圖標表示。日誌訊息是純文字，但也可以包含要在花括號 ({}) 中求值的表示式。

要新增日誌點，請右鍵單擊編輯器左邊距並選擇新增日誌點，或使用命令面板中的除錯：新增日誌點...命令（⇧⌘P (Windows, Linux Ctrl+Shift+P)）。您還可以配置 debug.gutterMiddleClickAction 設定，以便在按編輯器邊距中的滑鼠中鍵時切換日誌點。

與常規斷點一樣，日誌點可以啟用或停用，也可以透過條件和/或命中次數進行控制。

資料檢查

執行和除錯檢視

在除錯會話期間，您可以在執行和除錯檢視的變數部分檢查變數和表示式，或者透過將滑鼠懸停在編輯器中的源上來檢查。變數值和表示式求值相對於呼叫堆疊部分中選定的堆疊幀。

要更改除錯會話期間變數的值，請在變數部分右鍵單擊變數，然後選擇設定值（Enter (Windows, Linux F2)）。

此外，您還可以使用複製值操作來複制變量的值，或使用複製為表示式操作來複制訪問變數的表示式。然後，您可以在監視部分中使用此表示式。

變數和表示式也可以在執行和除錯檢視的監視部分進行求值和監視。

要按名稱或值過濾變數，請在焦點位於變數部分時使用 ⌥⌘F (Windows, Linux Ctrl+Alt+F) 鍵盤快捷方式，然後鍵入搜尋詞。

除錯控制檯 REPL

可以使用除錯控制檯 REPL（讀-求值-列印迴圈）功能來求值表示式。要開啟除錯控制檯，請使用除錯窗格頂部的除錯控制檯操作，或使用檢視：除錯控制檯命令（⇧⌘Y (Windows, Linux Ctrl+Shift+Y)）。

按下 Enter 後即可求值表示式，並且除錯控制檯 REPL 會在您鍵入時顯示建議。如果您需要輸入多行，請在行之間使用 Shift+Enter，然後按 Enter 傳送所有行進行求值。

除錯控制檯輸入使用活動編輯器的模式，這意味著除錯控制檯輸入支援語法著色、縮排、引號自動閉合以及其他語言功能。

多目標除錯

對於涉及多個程序的複雜場景（例如，客戶端和伺服器），VS Code 支援多目標除錯。啟動第一個除錯會話後，您可以啟動另一個除錯會話。第二個會話一經啟動並執行，VS Code UI 就會切換到多目標模式。

• 各個會話現在將顯示為呼叫堆疊檢視中的頂級元素。

  

• 除錯工具欄顯示當前活動會話（並且所有其他會話都可以在下拉選單中找到）。

  

• 除錯操作（例如，除錯工具欄中的所有操作）將應用於活動會話。活動會話可以透過使用除錯工具欄中的下拉選單或透過在呼叫堆疊檢視中選擇不同的元素來更改。

遠端除錯

VS Code 不支援跨所有語言的內建遠端除錯。遠端除錯是您正在使用的偵錯程式擴充套件的一項功能，您應該查閱擴充套件在 Marketplace 中的頁面以獲取支援和詳細資訊。

但是，有一個例外：VS Code 中包含的 Node.js 偵錯程式支援遠端除錯。有關更多資訊，請參閱 Node.js 除錯。

偵錯程式擴充套件

VS Code 為 Node.js 執行時提供了內建除錯支援，並且可以除錯 JavaScript、TypeScript 或任何其他被轉換為 JavaScript 的語言。

對於其他語言和執行時環境（包括 PHP、Ruby、Go、C#、Python、C++、PowerShell 和 許多其他）的除錯，請在 Visual Studio Marketplace 中查詢 Debuggers 擴充套件，或在頂層執行選單中選擇安裝其他偵錯程式。

以下是一些流行的包含除錯支援的擴充套件

後續步驟

要了解 VS Code 的 Node.js 除錯支援，請檢視

• Node.js - 介紹了 VS Code 中包含的 Node.js 偵錯程式。
• TypeScript - Node.js 偵錯程式也支援 TypeScript 除錯。

要觀看有關除錯基礎知識的教程，請觀看此影片

• VS Code 除錯入門 - 瞭解 VS Code 中的除錯。

要了解有關 Copilot 和 VS Code 中 AI 輔助除錯的更多資訊

• 使用 Copilot 除錯和修復問題
• Copilot 除錯和修復問題備忘單

要了解透過 VS Code 擴充套件對其他程式語言的除錯支援

• C++
• Python
• Java

要了解 VS Code 的任務執行支援，請前往

• 任務 - 介紹瞭如何使用 Gulp、Grunt 和 Jake 執行任務以及如何顯示錯誤和警告。

要編寫自己的偵錯程式擴充套件，請訪問

• 偵錯程式擴充套件 - 使用模擬示例來說明建立 VS Code 偵錯程式擴充套件所需的步驟。

常見問題

支援哪些除錯場景？

VS Code 內建支援在 Linux、macOS 和 Windows 上對基於 Node.js 的應用程式進行除錯。許多其他場景由 Marketplace 中提供的 VS Code 擴充套件支援。