使用 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 擴充套件支援許多其他場景。