在 Visual Studio Code 中調(diào)試

Visual Studio Code 的主要功能之一是其強大的調(diào)試支持。VS Code 的內(nèi)置調(diào)試器有助于加速編輯、編譯和調(diào)試循環(huán)。

VS Code 內(nèi)置了對Node.js運行時的調(diào)試支持，可以調(diào)試 JavaScript、TypeScript 或任何其他轉換為 JavaScript 的語言。

要調(diào)試其他語言和運行時（包括PHP、Ruby、Go、C#、Python、C++、PowerShell等），請在 VS Code Marketplace中查找擴展，或在頂級“運行”菜單中選擇“安裝其他調(diào)試器” 。Debuggers

以下是幾個流行的擴展，其中包括調(diào)試支持：

提示：上面顯示的擴展是動態(tài)查詢的。選擇上面的擴展程序圖塊以閱讀說明和評論，以決定哪個擴展程序最適合您。

以下文檔基于內(nèi)置Node.js調(diào)試器，但大多數(shù)概念和功能也適用于其他調(diào)試器。

在閱讀有關調(diào)試的內(nèi)容之前，首先創(chuàng)建一個示例 Node.js 應用程序會很有幫助。您可以按照Node.js 演練來安裝 Node.js 并創(chuàng)建一個簡單的“Hello World”JavaScript 應用程序 ( app.js)。設置簡單的應用程序后，此頁面將引導您了解 VS Code 調(diào)試功能。

要打開“運行和調(diào)試”視圖，請選擇VS Code 一側活動欄中的“運行和調(diào)試”圖標。您還可以使用鍵盤快捷鍵??D（Windows、Linux Ctrl+Shift+D）。

運行和調(diào)試視圖顯示與運行和調(diào)試相關的所有信息，并有一個包含調(diào)試命令和配置設置的頂欄。

如果尚未配置運行和調(diào)試（尚未launch.json創(chuàng)建），VS Code 將顯示 Run 啟動視圖。

頂級運行菜單包含最常見的運行和調(diào)試命令：

要在 VS Code 中運行或調(diào)試簡單的應用程序，請在“調(diào)試”開始視圖上選擇“運行并調(diào)試”或按F5，VS Code 將嘗試運行當前活動的文件。

但是，對于大多數(shù)調(diào)試場景，創(chuàng)建啟動配置文件是有益的，因為它允許您配置和保存調(diào)試設置詳細信息。VS Code 將調(diào)試配置信息保存在launch.json位于.vscode工作區(qū)（項目根文件夾）的文件夾中或用戶設置或工作區(qū)設置中的文件中。

要創(chuàng)建launch.json文件，請單擊運行啟動視圖中的創(chuàng)建 launch.json 文件鏈接。

VS Code 將嘗試自動檢測您的調(diào)試環(huán)境，但如果失敗，您將必須手動選擇它：

以下是為 Node.js 調(diào)試生成的啟動配置：

如果返回到文件資源管理器視圖 ( ??E (Windows、Linux Ctrl+Shift+E ) )，您將看到 VS Code 已創(chuàng)建一個.vscode文件夾并將launch.json文件添加到您的工作區(qū)。

注意：即使沒有在 VS Code 中打開文件夾，您也可以調(diào)試簡單的應用程序，但無法管理啟動配置和設置高級調(diào)試。如果您沒有打開文件夾，則 VS Code 狀態(tài)欄為紫色。

請注意，啟動配置中可用的屬性因調(diào)試器而異。您可以使用 IntelliSense 建議 ( ?Space (Windows、Linux Ctrl+Space ) ) 來找出特定調(diào)試器存在哪些屬性。懸停幫助也適用于所有屬性。

不要假設可用于一個調(diào)試器的屬性也自動適用于其他調(diào)試器。如果您在啟動配置中看到綠色波浪線，請將鼠標懸停在它們上方以了解問題所在，并在啟動調(diào)試會話之前嘗試修復它們。

檢查所有自動生成的值并確保它們對您的項目和調(diào)試環(huán)境有意義。

在 VS Code 中，有兩種核心調(diào)試模式：Launch和Attach，它們處理兩種不同的工作流程和開發(fā)人員部分。根據(jù)您的工作流程，了解哪種類型的配置適合您的項目可能會令人困惑。

如果您來自瀏覽器開發(fā)人員工具背景，您可能不習慣“從工具啟動”，因為您的瀏覽器實例已經(jīng)打開。當您打開 DevTools 時，您只需將 DevTools附加到打開的瀏覽器選項卡即可。另一方面，如果您來自服務器或桌面背景，那么讓編輯器為您啟動進程是很正常的，并且編輯器會自動將其調(diào)試器附加到新啟動的進程。

解釋啟動和附加之間差異的最佳方法是將啟動配置視為如何在VS Code 附加到應用程序之前以調(diào)試模式啟動應用程序的秘訣，而附加配置是如何連接 VS Code 的秘訣調(diào)試器到已運行的應用程序或進程。

VS Code 調(diào)試器通常支持在調(diào)試模式下啟動程序或在調(diào)試模式下附加到已運行的程序。根據(jù)請求（attach或launch），需要不同的屬性，VS Code 的launch.json驗證和建議應該對此有所幫助。

要將新配置添加到現(xiàn)有配置launch.json，請使用以下技術之一：

VS Code 還支持復合啟動配置，可同時啟動多個配置；欲了解更多詳情，請閱讀本節(jié)。

為了啟動調(diào)試會話，首先使用“運行和調(diào)試”視圖中的“配置”下拉列表選擇名為“啟動程序”的配置。設置啟動配置后，使用F5啟動調(diào)試會話。

或者，您可以通過命令面板( ??P (Windows、Linux Ctrl+Shift+P ) ) 過濾“調(diào)試：選擇并開始調(diào)試”或鍵入'debug '并選擇要調(diào)試的配置來運行配置。

調(diào)試會話啟動后，將顯示“調(diào)試控制臺”面板并顯示調(diào)試輸出，并且狀態(tài)欄會更改顏色（默認顏色主題為橙色）：

此外，調(diào)試狀態(tài)會出現(xiàn)在狀態(tài)欄中，顯示活動的調(diào)試配置。通過選擇調(diào)試狀態(tài)，用戶可以更改活動啟動配置并開始調(diào)試，而無需打開“運行和調(diào)試”視圖。

調(diào)試會話啟動后，調(diào)試工具欄將出現(xiàn)在編輯器的頂部。

提示：使用該設置debug.toolBarLocation來控制調(diào)試工具欄的位置。它可以是默認的floating、docked運行和調(diào)試視圖，或者hidden。調(diào)試工具欄floating可以水平拖動，也可以向下拖動到編輯器區(qū)域。

除了調(diào)試程序之外，VS Code 還支持運行程序。調(diào)試：運行（啟動而不調(diào)試）作通過?F5（Windows、Linux Ctrl+F5）觸發(fā)，并使用當前選擇的啟動配置。“運行”模式支持許多啟動配置屬性。VS Code 在程序運行時維護調(diào)試會話，按“停止”按鈕終止程序。

提示：“運行”作始終可用，但并非所有調(diào)試器擴展都支持“運行”。在這種情況下，“運行”將與“調(diào)試”相同。

可以通過單擊編輯器邊距或在當前行上使用F9來切換斷點。可以在“運行和調(diào)試”視圖的“斷點”部分中進行更精細的斷點控制（啟用/禁用/重新應用） 。

如果調(diào)試器支持中斷不同類型的錯誤或異常，則這些也將在BREAKPOINTS視圖中可用。

重新應用所有斷點命令將所有斷點再次設置到其原始位置。如果您的調(diào)試環(huán)境“懶惰”并且在尚未執(zhí)行的源代碼中“放錯了”斷點，這會很有幫助。

或者，可以通過啟用以下設置在編輯器的概述標尺中顯示斷點debug.showBreakpointsInOverviewRuler：

日志點是斷點的變體，它不會“中斷”調(diào)試器，而是將消息記錄到控制臺。日志點對于在調(diào)試無法暫停或停止的生產(chǎn)服務器時注入日志記錄特別有用。

日志點由“菱形”形狀的圖標表示。日志消息是純文本，但可以包含要在大括號 ('{}') 內(nèi)計算的表達式。

就像常規(guī)斷點一樣，日志點可以啟用或禁用，也可以通過條件和/或命中計數(shù)進行控制。

注意：VS Code 的內(nèi)置 Node.js 調(diào)試器支持日志點，但也可以通過其他調(diào)試擴展來實現(xiàn)。例如，Python 和 Java 擴展支持日志點。

可以在運行和調(diào)試視圖的變量部分或通過將鼠標懸停在編輯器中的源代碼上來檢查變量。變量值和表達式求值與CALL STACK部分中選定的堆棧幀相關。

可以使用變量上下文菜單中的“設置值”作來修改變量值。此外，您可以使用“復制值”作來復制變量的值，或使用“復制為表達式”作來復制表達式以訪問變量。

還可以在“運行”和“調(diào)試”視圖的“觀察”部分中計算和觀察變量和表達式。

當焦點位于變量部分時，可以通過鍵入來過濾變量名稱和值。

有許多l(xiāng)aunch.json屬性可以幫助支持不同的調(diào)試器和調(diào)試場景。如上所述，在指定屬性值后，您可以使用 IntelliSense ( ?Space (Windows、Linux Ctrl+Space ) ) 查看可用屬性的列表type。

以下屬性對于每個啟動配置都是必需的：

以下是一些適用于所有啟動配置的可選屬性：

許多調(diào)試器支持以下一些屬性：

VS Code 使常用路徑和其他值可用作變量，并支持launch.json. 這意味著您不必在調(diào)試配置中使用絕對路徑。例如，${workspaceFolder}給出工作區(qū)文件夾的根路徑、${file}在活動編輯器中打開的文件以及${env:Name}環(huán)境變量“名稱”。您可以在變量參考中或通過在字符串屬性中調(diào)用 IntelliSense來查看預定義變量的完整列表launch.json。

Launch.json支持定義取決于運行調(diào)試器的作系統(tǒng)的值（例如，要傳遞給程序的參數(shù)）。為此，請將特定于平臺的文字放入文件中l(wèi)aunch.json，并在該文字內(nèi)指定相應的屬性。

"args"下面是在 Windows 上以不同方式傳遞給程序的示例：

有效的作屬性適用"windows"于 Windows、"linux"Linux 和"osx"macOS。在作系統(tǒng)特定范圍內(nèi)定義的屬性會覆蓋在全局范圍內(nèi)定義的屬性。

請注意，該type屬性不能放置在特定于平臺的部分內(nèi)，因為type間接確定遠程調(diào)試場景中的平臺，這將導致循環(huán)依賴。

在下面的示例中，除 macOS 外，調(diào)試程序始終在進入時停止：

"launch"VS Code 支持在用戶設置中添加對象。然后，此"launch"配置將在您的工作區(qū)之間共享。例如：

強大的 VS Code 調(diào)試功能是能夠根據(jù)表達式、命中計數(shù)或兩者的組合設置條件。

您可以在創(chuàng)建源斷點（使用“添加條件斷點”作）或修改現(xiàn)有斷點（使用“編輯條件”作）時添加條件和/或命中計數(shù)。在這兩種情況下，都會打開一個帶有下拉菜單的內(nèi)聯(lián)文本框，您可以在其中輸入表達式：

函數(shù)斷點和異常斷點還支持條件和命中計數(shù)編輯支持。您可以從上下文菜單或新的內(nèi)聯(lián)編輯條件作啟動條件編輯。

BREAKPOINTS視圖中的條件編輯示例：

如果調(diào)試器不支持條件斷點，則“添加條件斷點”和“編輯條件”作將丟失。

僅當執(zhí)行到達與內(nèi)聯(lián)斷點關聯(lián)的列時，才會命中內(nèi)聯(lián)斷點。這在調(diào)試單行中包含多個語句的精簡代碼時特別有用。

可以使用?F9（Windows、Linux Shift+F9）或在調(diào)試會話期間通過上下文菜單設置內(nèi)聯(lián)斷點。內(nèi)聯(lián)斷點在編輯器中內(nèi)聯(lián)顯示。

內(nèi)聯(lián)斷點也可以有條件。可以通過編輯器左邊距中的上下文菜單編輯一行上的多個斷點。

調(diào)試器可以支持通過指定函數(shù)名稱來創(chuàng)建斷點，而不是直接在源代碼中放置斷點。這在源不可用但函數(shù)名稱已知的情況下非常有用。

通過按BREAKPOINTS部分標題中的+按鈕并輸入函數(shù)名稱來創(chuàng)建函數(shù)斷點。函數(shù)斷點在BREAKPOINTS部分中以紅色三角形顯示。

如果調(diào)試器支持數(shù)據(jù)斷點，則可以從VARIABLES視圖的上下文菜單中設置它們。值更改/讀取/訪問時中斷命令將添加一個數(shù)據(jù)斷點，當基礎變量的值更改/讀取/訪問時會命中該斷點。數(shù)據(jù)斷點在“斷點”部分中以紅色六邊形顯示。

可以使用調(diào)試控制臺REPL（讀取-求值-打印循環(huán)）功能來計算表達式。要打開調(diào)試控制臺，請使用“調(diào)試”窗格頂部的“調(diào)試控制臺”作或使用“查看：調(diào)試控制臺”命令 ( ??Y (Windows、Linux Ctrl+Shift+Y ) )。按Enter 鍵后將對表達式求值，并且調(diào)試控制臺 REPL 在您鍵入時顯示建議。如果需要輸入多行，請在各行之間使用Shift+Enter，然后使用Enter發(fā)送所有行進行評估。調(diào)試控制臺輸入使用活動編輯器的模式，這意味著調(diào)試控制臺輸入支持語法著色、縮進、自動關閉引號和其他語言功能。

注意：您必須處于正在運行的調(diào)試會話中才能使用調(diào)試控制臺 REPL。

重定向輸入/輸出是調(diào)試器/運行時特定的，因此 VS Code 沒有適用于所有調(diào)試器的內(nèi)置解決方案。

您可能需要考慮以下兩種方法：

在終端或命令提示符中手動啟動程序進行調(diào)試（“調(diào)試目標”），并根據(jù)需要重定向輸入/輸出。確保將適當?shù)拿钚羞x項傳遞給調(diào)試目標，以便調(diào)試器可以附加到它。創(chuàng)建并運行附加到調(diào)試目標的“附加”調(diào)試配置。

如果您使用的調(diào)試器擴展可以在 VS Code 的集成終端（或外部終端）中運行調(diào)試目標，則可以嘗試將 shell 重定向語法（例如“