使用 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. 狀態列中的偵錯狀態會顯示作用中的偵錯組態。選取偵錯狀態以變更作用中的啟動組態，並在無需開啟執行與偵錯檢視的情況下開始偵錯。

   

偵錯動作

一旦偵錯工作階段啟動，偵錯工具列就會出現在視窗頂部。工具列包含用於控制偵錯工作階段流程的動作，例如逐步執行程式碼、暫停執行和停止偵錯工作階段。

下表說明偵錯工具列中可用的動作

如果您的偵錯工作階段涉及多個目標 (例如，用戶端和伺服器)，偵錯工具列會顯示工作階段清單，並可讓您在它們之間切換。

中斷點

中斷點是一個特殊標記，它會在程式碼執行到特定點時暫停，讓您可以在該點檢查應用程式的狀態。VS Code 支援多種中斷點類型。

設定中斷點

若要設定或取消設定中斷點，請點擊編輯器邊界，或在目前行上使用 F9。

• 編輯器邊界中的中斷點通常顯示為紅色實心圓圈。
• 停用的中斷點顯示為灰色實心圓圈。
• 當偵錯工作階段啟動時，無法向偵錯工具註冊的中斷點會變為灰色空心圓圈。如果來源在不支援即時編輯的偵錯工作階段執行期間被編輯，也可能發生相同情況。

此外，透過啟用設定 debug.showBreakpointsInOverviewRuler 在 VS Code 中開啟 在 VS Code Insiders 中開啟 ，中斷點可以在編輯器的總覽標尺中顯示。

若要更有效地控制您的中斷點，請使用執行與偵錯檢視的中斷點區段。此區段會列出您程式碼中的所有中斷點，並提供額外的動作來管理它們。

中斷點類型

條件式中斷點

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

• 表達式條件：當中斷點評估為 true 時，中斷點就會被命中。
• 命中次數：命中次數 控制中斷點在中斷執行前需要命中的次數。是否尊重命中次數以及表達式的確切語法，可能會因偵錯工具擴充功能而異。
• 等待中斷點：當中斷點被命中時 (觸發的中斷點)，中斷點就會被啟動。

若要新增條件式中斷點

1. 建立條件式中斷點

   • 在編輯器邊界中按一下右鍵，然後選取新增條件式中斷點。
   • 在命令選擇區中使用新增條件式中斷點命令 (⇧⌘P (Windows、Linux Ctrl+Shift+P))。

2. 選擇您要設定的條件類型 (表達式、命中次數或等待中斷點)。

   

若要將條件新增到現有的中斷點

1. 編輯現有的中斷點

   • 在編輯器邊界的中斷點上按一下右鍵，然後選取編輯中斷點。
   • 在執行與偵錯檢視的中斷點區段中，選取現有中斷點旁邊的鉛筆圖示。

2. 編輯條件 (表達式、命中次數或等待中斷點)。

如果偵錯工具不支援條件式中斷點，則新增條件式中斷點和編輯條件動作將不可用。

觸發的中斷點

觸發的中斷點是一種條件式中斷點，在另一個中斷點被命中後才會啟用。它們在診斷只有在特定前置條件後才會發生的程式碼失敗情況時非常有用。

可以透過右鍵點選符號邊界，選取 新增觸發的中斷點，然後選擇哪個其他中斷點來啟用該中斷點。

行內中斷點

行內中斷點只有在執行到達與行內中斷點相關聯的欄位時才會被命中。這在偵錯縮小的程式碼時很有用，因為它在單一行中包含多個陳述式。

行內中斷點可以使用 ⇧F9 (Windows、Linux Shift+F9) 或在偵錯工作階段期間透過內容功能表設定。行內中斷點會顯示在編輯器中。

行內中斷點也可以有條件。透過編輯器左側邊界中的內容功能表，可以編輯一行上的多個中斷點。

函數中斷點

偵錯工具可以透過指定函數名稱來建立中斷點，而不是直接將中斷點放置在原始碼中。這在原始碼不可用但函數名稱已知的情況下很有用。

若要建立函數中斷點，請在中斷點區段標題中選取 + 按鈕並輸入函數名稱。函數中斷點在中斷點區段中以紅色三角形顯示。

資料中斷點

如果偵錯工具支援資料中斷點，則可以在變數檢視的內容功能表中設定它們。值變更時中斷/讀取時中斷/存取時中斷命令會新增一個資料中斷點，當基礎變數的值變更/被讀取/被存取時，該中斷點就會被命中。資料中斷點在中斷點區段中以紅色六邊形顯示。

記錄點 (Logpoints)

記錄點是中斷點的一種變體，它不會中斷偵錯工具，而是將訊息記錄到偵錯主控台。記錄點可以幫助您節省時間，因為無需在程式碼中新增或移除記錄陳述式。

記錄點以菱形圖示表示。記錄訊息是純文字，但也可以包含在大括號 ('{}') 中評估的表達式。

若要新增記錄點，請在編輯器左側邊界中按一下右鍵並選取新增記錄點，或在命令選擇區中使用偵錯：新增記錄點... 命令 (⇧⌘P (Windows、Linux Ctrl+Shift+P))。您也可以設定 debug.gutterMiddleClickAction 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定，以便在編輯器邊界中按下中鍵時切換記錄點。

就像一般中斷點一樣，記錄點可以啟用或停用，也可以由條件和/或命中次數控制。

資料檢閱

執行與偵錯檢視

在偵錯工作階段期間，您可以在執行與偵錯檢視的變數區段中檢查變數和表達式，或透過在編輯器中將滑鼠懸停在它們的原始碼上來檢查。變數值和表達式評估相對於呼叫堆疊區段中選取的堆疊框架。

若要在偵錯工作階段期間變更變數的值，請在變數區段中右鍵點擊該變數並選取設定值 (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 不支援所有語言的內建遠端偵錯。遠端偵錯是您正在使用的偵錯擴充功能的一項功能，您應該查閱市集中該擴充功能的頁面以獲取支援和詳細資訊。

然而，有一個例外：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 中的偵錯。

若要了解更多關於 VS Code 中的 Copilot 和 AI 輔助偵錯

• 使用 Copilot 偵錯和修復問題
• 用於偵錯和修復問題的 Copilot 速查表

若要了解透過 VS Code 擴充功能對其他程式語言的偵錯支援

• C++
• Python
• Java

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

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

若要編寫自己的偵錯工具擴充功能，請造訪

• 偵錯工具擴充功能 - 使用模擬範例來說明建立 VS Code 偵錯擴充功能所需的步驟。

常見問題

支援哪些偵錯情境？

VS Code 開箱即用支援在 Linux、macOS 和 Windows 上偵錯基於 Node.js 的應用程式。市集上提供的VS Code 擴充功能支援許多其他情境。