使用 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. 編輯條件 (運算式、命中次數或等待中斷點)。

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

觸發的中斷點

觸發的中斷點是一種條件式中斷點，會在另一個中斷點被命中後啟用。當您在診斷程式碼中只有在特定先決條件之後才會發生的失敗案例時，這些中斷點會非常有用。

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

內嵌中斷點

只有在執行到達與內嵌中斷點相關聯的欄時，才會命中內嵌中斷點。這在偵錯包含單行多個陳述式的最小化 (minified) 程式碼時非常有用。

可以使用 ⇧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 不支援所有語言的內建遠端偵錯。遠端偵錯是您所使用的偵錯擴充功能的一項功能，您應該參閱 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 中的偵錯。

若要深入了解 VS Code 中的 Copilot 與 AI 輔助偵錯：

• 使用 Copilot 進行偵錯與修正問題
• 用於偵錯與修正問題的 AI 快速參考手冊

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

• C++
• Python
• Java

若要了解 VS Code 的工作執行支援，請前往：

• 工作 (Tasks) - 說明如何使用 Gulp、Grunt 和 Jake 執行工作，以及如何顯示錯誤和警告。

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

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

常見問題

支援哪些偵錯情境？

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