使用 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 中開始偵錯。
偵錯工具使用者介面
下圖顯示偵錯工具使用者介面的主要元件
- 執行和偵錯檢視：顯示所有與執行、偵錯和管理偵錯設定相關的資訊。
- 偵錯工具列：具有最常見偵錯動作的按鈕。
- 偵錯主控台：讓您檢視和與偵錯工具中執行的程式碼輸出互動。
- 偵錯側邊欄：在偵錯工作階段期間，可讓您與呼叫堆疊、中斷點、變數和監看式變數互動。
- 執行功能表：具有最常見的執行和偵錯命令。
開始偵錯之前
-
從 Visual Studio Marketplace 為您的語言或執行階段安裝偵錯擴充功能。
VS Code 內建支援 JavaScript、TypeScript 和 Node.js 偵錯。
-
為您的專案定義偵錯設定。
對於簡單的應用程式，VS Code 會嘗試執行和偵錯目前使用中的檔案。對於更複雜的應用程式或偵錯案例，您需要建立
launch.json檔案來指定偵錯工具設定。取得更多關於建立偵錯設定的資訊。提示VS Code 中的 Copilot 可以協助您產生
launch.json檔案。如需更多資訊，請參閱使用 Copilot 產生偵錯設定。 -
在您的程式碼中設定中斷點。
中斷點是一個標記，您可以設定在程式碼行上，告知偵錯工具在執行到該行時暫停執行。您可以透過在編輯器中行號旁的邊界中按一下來設定中斷點。
如需更多關於中斷點的資訊，請參閱使用中斷點。
開始偵錯工作階段
若要在 VS Code 中開始偵錯工作階段，請執行下列步驟
-
開啟包含您要偵錯之程式碼的檔案。
-
使用 F5 鍵開始偵錯工作階段，或在 [執行和偵錯] 檢視 (
workbench.view.debug) 中選取 [執行和偵錯]。
對於更複雜的偵錯案例，例如連接到執行中的程序，您需要建立
launch.json檔案來指定偵錯工具設定。取得更多關於偵錯設定的資訊。 -
從可用的偵錯工具清單中選擇您要使用的偵錯工具。
VS Code 會嘗試執行和偵錯目前使用中的檔案。對於 Node.js，VS Code 會檢查
package.json檔案中是否有start指令碼，以判斷應用程式的進入點。 -
當偵錯工作階段開始時，會顯示 [偵錯主控台] 面板並顯示偵錯輸出，且狀態列會變更色彩 (預設色彩主題為橘色)。
-
狀態列中的偵錯狀態會顯示使用中的偵錯設定。選取偵錯狀態以變更使用中的啟動設定，並開始偵錯，而無需開啟 [執行和偵錯] 檢視。
偵錯動作
一旦偵錯工作階段開始，偵錯工具列就會出現在視窗頂端。工具列包含控制偵錯工作階段流程的動作，例如逐步執行程式碼、暫停執行和停止偵錯工作階段。
下表說明偵錯工具列中可用的動作
| 動作 | 描述 |
|---|---|
| 繼續 / 暫停 F5 |
繼續：繼續正常程式/指令碼執行 (直到下一個中斷點)。 暫停：檢查在目前行執行的程式碼，並逐行偵錯。 |
| 跳過 F10 |
將下一個方法當作單一命令執行，而不檢查或追蹤其元件步驟。 |
| 逐步進入 F11 |
進入下一個方法以逐行追蹤其執行。 |
| 逐步跳出 ⇧F11 (Windows、Linux Shift+F11) |
當在方法或子程式內部時，完成目前方法的剩餘行，如同單一命令，以返回先前的執行內容。 |
| 重新啟動 ⇧⌘F5 (Windows、Linux Ctrl+Shift+F5) |
終止目前程式執行，並使用目前的執行設定再次開始偵錯。 |
| 停止 ⇧F5 (Windows、Linux Shift+F5) |
終止目前程式執行。 |
如果您的偵錯工作階段涉及多個目標 (例如，用戶端和伺服器)，偵錯工具列會顯示工作階段清單，並讓您在它們之間切換。
使用 debug.toolBarLocation 設定來控制偵錯工具列的位置。它可以是預設的 floating、docked 到 [執行和偵錯] 檢視，或 hidden。浮動偵錯工具列可以水平拖曳，也可以向下拖曳到編輯器區域 (直到離頂端邊緣一定距離)。
中斷點
中斷點是一個特殊標記，會在特定點暫停程式碼的執行，讓您可以檢查該點應用程式的狀態。VS Code 支援幾種中斷點類型。
設定中斷點
若要設定或取消設定中斷點，請按一下編輯器邊界，或在目前行使用 F9。
- 編輯器邊界中的中斷點通常顯示為紅色實心圓圈。
- 已停用的中斷點具有灰色實心圓圈。
- 當偵錯工作階段開始時，無法向偵錯工具註冊的中斷點會變更為灰色空心圓圈。如果在執行沒有即時編輯支援的偵錯工作階段時編輯來源，也可能會發生相同情況。
或者，可以透過啟用 debug.showBreakpointsInOverviewRuler 設定，在編輯器的概觀尺規中顯示中斷點
若要更精確地控制中斷點，請使用 [執行和偵錯] 檢視的 [中斷點] 區段。此區段列出程式碼中的所有中斷點，並提供額外的動作來管理它們。
中斷點類型
條件式中斷點
VS Code 強大的偵錯功能是能夠根據運算式、命中計數或兩者的組合來設定條件。
- 運算式條件：只要運算式評估為
true，就會命中中斷點。 - 命中計數：命中計數控制中斷點在中斷執行之前需要命中的次數。命中計數是否受到尊重，以及運算式的確切語法，可能會因偵錯工具擴充功能而異。
- 等候中斷點：當命中另一個中斷點 (觸發的中斷點) 時，會啟用中斷點。
若要新增條件式中斷點
-
建立條件式中斷點
- 在編輯器邊界中按一下滑鼠右鍵，然後選取 [新增條件式中斷點]。
- 在命令選擇區中使用 [新增條件式中斷點] 命令 (⇧⌘P (Windows、Linux Ctrl+Shift+P))。
-
選擇您要設定的條件類型 (運算式、命中計數或等候中斷點)。
若要將條件新增至現有的中斷點
-
編輯現有的中斷點
- 在編輯器邊界中的中斷點上按一下滑鼠右鍵，然後選取 [編輯中斷點]。
- 在 [執行和偵錯] 檢視的 [中斷點] 區段中，選取現有中斷點旁的鉛筆圖示。
-
編輯條件 (運算式、命中計數或等候中斷點)。
如果偵錯工具不支援條件式中斷點，則 [新增條件式中斷點] 和 [編輯條件] 動作將無法使用。
觸發的中斷點
觸發的中斷點是一種條件式中斷點，會在命中另一個中斷點後啟用。當診斷程式碼中僅在特定先決條件之後才會發生的失敗案例時，它們可能很有用。
可以透過在字元邊界上按一下滑鼠右鍵，選取 [新增觸發的中斷點]，然後選擇哪個其他中斷點啟用中斷點來設定觸發的中斷點。
行內中斷點
只有當執行到達與行內中斷點關聯的資料行時，才會命中行內中斷點。這在偵錯縮小化的程式碼時很有用，這類程式碼在單行中包含多個陳述式。
可以使用 ⇧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 傳送所有行以進行評估。
[偵錯主控台] 輸入使用使用中編輯器的模式，這表示 [偵錯主控台] 輸入支援語法色彩標示、縮排、引號自動關閉和其他語言功能。
您必須處於使用中的偵錯工作階段才能使用 [偵錯主控台] REPL。
多目標偵錯
對於涉及多個程序 (例如，用戶端和伺服器) 的複雜案例，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 - 說明 Node.js 偵錯工具，其包含在 VS Code 中。
- TypeScript - Node.js 偵錯工具也支援 TypeScript 偵錯。
若要觀看關於偵錯基礎知識的教學課程，請查看此影片
- VS Code 偵錯入門 - 瞭解關於 VS Code 中的偵錯。
若要深入瞭解關於 Copilot 和 VS Code 中 AI 輔助偵錯
若要瞭解關於透過 VS Code 擴充功能對其他程式設計語言的偵錯支援
若要瞭解關於 VS Code 的工作執行支援，請前往
- 工作 - 說明如何使用 Gulp、Grunt 和 Jake 執行工作，以及如何顯示錯誤和警告。
若要撰寫您自己的偵錯工具擴充功能，請造訪
- 偵錯工具擴充功能 - 使用模擬範例來說明建立 VS Code 偵錯擴充功能所需的步驟。
常見問題
支援哪些偵錯案例？
基於 Node.js 的應用程式偵錯在 Linux、macOS 和 Windows 上透過 VS Code 隨即支援。Marketplace 中提供的 VS Code 擴充功能支援許多其他案例。