現已推出!閱讀關於 11 月的新功能和修正。

偵錯

Visual Studio Code 的主要功能之一是其優異的偵錯支援。VS Code 的內建偵錯工具可協助加速您的編輯、編譯和偵錯迴圈。

使用者介面

下圖顯示偵錯使用者介面的主要元件

Debugging diagram

  1. 執行和偵錯檢視:顯示與執行、偵錯和管理偵錯組態設定相關的所有資訊。
  2. 偵錯工具列:具有最常見偵錯動作的按鈕。
  3. 偵錯主控台:可檢視及與偵錯工具中執行的程式碼輸出互動。
  4. 偵錯側邊欄:在偵錯工作階段期間,可讓您與呼叫堆疊、中斷點、變數和監看式變數互動。

偵錯工具擴充功能

VS Code 具有內建的偵錯支援,適用於 Node.js 執行階段,並且可以偵錯 JavaScript、TypeScript 或任何其他轉譯為 JavaScript 的語言。

如需偵錯其他語言和執行階段 (包括 PHPRubyGoC#PythonC++PowerShell許多其他),請在 VS Code 市集中尋找 偵錯工具 擴充功能,或選取最上層 [執行] 功能表中的 [安裝其他偵錯工具]。

以下是一些包含偵錯支援的熱門擴充功能

提示:上述顯示的擴充功能是動態查詢的。選取上方的擴充功能磚以閱讀描述和評論,以決定哪個擴充功能最適合您。

開始偵錯

下列文件是基於內建的 Node.js 偵錯工具,但大多數的概念和功能也適用於其他偵錯工具。

在閱讀有關偵錯的內容之前,最好先建立範例 Node.js 應用程式。您可以依照 Node.js 逐步解說來安裝 Node.js 並建立簡單的「Hello World」JavaScript 應用程式 (app.js)。在您設定好簡單的應用程式之後,此頁面將引導您了解 VS Code 偵錯功能。

執行和偵錯檢視

若要開啟 [執行和偵錯] 檢視,請選取 VS Code 側邊 [活動列] 中的 [執行和偵錯] 圖示。您也可以使用鍵盤快速鍵 ⇧⌘D (Windows、Linux Ctrl+Shift+D)

Run and Debug icon

[執行和偵錯] 檢視會顯示與執行和偵錯相關的所有資訊,並具有包含偵錯命令和組態設定的頂端列。

如果執行和偵錯尚未設定 (尚未建立 launch.json),VS Code 會顯示 [執行啟動] 檢視。

Simplified initial Run and Debug view

執行功能表

最上層的 [執行] 功能表具有最常見的執行和偵錯命令

Run menu

啟動設定

若要在 VS Code 中執行或偵錯簡單的應用程式,請選取 [偵錯啟動] 檢視中的 [執行和偵錯],或按 F5,VS Code 會嘗試執行您目前作用中的檔案。

但是,對於大多數偵錯案例,建立啟動組態檔案會很有幫助,因為它可以讓您設定和儲存偵錯設定詳細資料。VS Code 會將偵錯組態資訊保留在 launch.json 檔案中,該檔案位於您工作區 (專案根資料夾) 或您使用者設定工作區設定.vscode 資料夾中。

若要建立 launch.json 檔案,請選取 [執行啟動] 檢視中的 [建立 launch.json 檔案]。

launch configuration

VS Code 會嘗試自動偵測您的偵錯環境,但如果失敗,您必須手動選擇它

debug environment selector

以下是為 Node.js 偵錯產生的啟動組態

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}\\app.js"
    }
  ]
}

如果您返回 [檔案總管] 檢視 (⇧⌘E (Windows、Linux Ctrl+Shift+E)),您會看到 VS Code 已建立 .vscode 資料夾,並將 launch.json 檔案新增至您的工作區。

launch.json in Explorer

注意:即使您在 VS Code 中沒有開啟任何資料夾,也可以偵錯簡單的應用程式,但無法管理啟動組態和設定進階偵錯。如果您沒有開啟任何資料夾,VS Code 狀態列會是紫色。

請注意,啟動組態中可用的屬性因偵錯工具而異。您可以使用 IntelliSense 建議 (⌃Space (Windows、Linux Ctrl+Space)) 來找出特定偵錯工具存在哪些屬性。所有屬性也都提供滑鼠游標暫留說明。

不要假設一個偵錯工具可用的屬性會自動適用於其他偵錯工具。如果您在啟動組態中看到紅色波浪線,請將滑鼠游標移至其上方,以了解問題是什麼,並嘗試在啟動偵錯工作階段之前修正它們。

launch.json IntelliSense

檢閱所有自動產生的值,並確定它們對您的專案和偵錯環境有意義。

啟動與附加組態

在 VS Code 中,有兩種核心偵錯模式,啟動附加,它們處理兩個不同的工作流程和開發人員區段。根據您的工作流程,可能會搞不清楚哪種組態類型適合您的專案。

如果您有瀏覽器開發人員工具的背景,您可能不習慣「從工具啟動」,因為您的瀏覽器實例已經開啟。當您開啟開發人員工具時,您只是將開發人員工具附加到您開啟的瀏覽器分頁。另一方面,如果您有伺服器或桌面背景,則您的編輯器為您啟動您的進程,並且您的編輯器會自動將其偵錯工具附加到新啟動的進程是很正常的。

解釋啟動附加之間差異的最佳方法是將啟動配置視為如何在 VS Code 附加到您的應用程式之前以偵錯模式啟動您的應用程式的配方,而附加配置是如何將 VS Code 的偵錯工具連接到已經執行中的應用程式或進程的配方。

VS Code 偵錯工具通常支援以偵錯模式啟動程式或附加到已在偵錯模式下執行的程式。根據請求 (attachlaunch),需要不同的屬性,而 VS Code 的 launch.json 驗證和建議應該可以幫助您。

新增組態

若要將新組態新增至現有的 launch.json,請使用下列其中一種技巧

  • 如果您的游標位於組態陣列內,請使用 IntelliSense。
  • 按下新增組態按鈕,在陣列開頭叫用程式碼片段 IntelliSense。
  • 在 [執行] 功能表中選擇新增組態選項。

launch json suggestions

VS Code 也支援複合啟動組態,以便同時啟動多個組態;如需更多詳細資料,請閱讀此區段

為了開始偵錯工作階段,請先使用 [執行和偵錯] 檢視中的組態下拉式選單選取名為啟動程式的組態。設定好啟動組態後,請使用 F5 開始偵錯工作階段。

或者,您可以透過命令選擇區 (⇧⌘P (Windows、Linux Ctrl+Shift+P)) 執行您的組態,方法是篩選偵錯:選取並開始偵錯,或輸入 'debug ' 並選取您要偵錯的組態。

偵錯工作階段開始後,就會顯示偵錯主控台面板並顯示偵錯輸出,並且狀態列會變更顏色 (預設色彩主題為橘色)。

debug session

此外,偵錯狀態會顯示在狀態列中,顯示作用中的偵錯組態。透過選取偵錯狀態,使用者可以變更作用中的啟動組態並開始偵錯,而不需要開啟執行和偵錯檢視。

Debug status

偵錯動作

偵錯工作階段開始後,偵錯工具列會顯示在視窗頂端。

Debug Actions

動作 說明
繼續 / 暫停
F5
繼續:繼續一般程式/指令碼執行 (直到下一個中斷點)。
暫停:檢查在目前行執行的程式碼,並逐行偵錯。
跳過
F10
將下一個方法做為單一命令執行,而不檢查或追蹤其元件步驟。
跳入
F11
進入下一個方法以逐行追蹤其執行。
跳出
⇧F11 (Windows、Linux Shift+F11)
當在方法或副程式內時,透過完成目前方法的其餘行 (如同它是單一命令),返回先前的執行內容。
重新啟動
⇧⌘F5 (Windows、Linux Ctrl+Shift+F5)
終止目前的程式執行,並使用目前的執行組態再次開始偵錯。
停止
⇧F5 (Windows、Linux Shift+F5)
終止目前的程式執行。

提示:使用設定 debug.toolBarLocation 來控制偵錯工具列的位置。它可以是預設的 floatingdocked執行和偵錯檢視,或是 hiddenfloating 偵錯工具列可以水平拖曳,也可以向下拖曳到編輯器區域 (最遠到頂端邊緣的特定距離)。

執行模式

除了偵錯程式之外,VS Code 也支援執行程式。偵錯:不使用偵錯啟動動作會以 ⌃F5 (Windows、Linux Ctrl+F5) 觸發,並使用目前選取的啟動組態。許多啟動組態屬性在「執行」模式中受到支援。VS Code 在程式執行時維護偵錯工作階段,並且按下停止按鈕會終止程式。

提示執行動作一律可用,但並非所有偵錯工具擴充功能都支援「執行」。在此情況下,「執行」會與「偵錯」相同。

中斷點

可以透過按一下編輯器邊界或在目前行使用 F9 來切換中斷點。更精細的中斷點控制 (啟用/停用/重新套用) 可以在執行和偵錯檢視的中斷點區段中完成。

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

如果偵錯工具支援在不同種類的錯誤或例外狀況上中斷,這些也會在中斷點檢視中提供。

重新套用所有中斷點命令會將所有中斷點再次設定到其原始位置。如果您的偵錯環境「延遲」並且在尚未執行的原始程式碼中「放錯」中斷點,這會很有幫助。

Breakpoints

您可以選擇性地藉由啟用設定 debug.showBreakpointsInOverviewRuler,在編輯器的概觀尺規中顯示中斷點。

breakpoints in overview ruler

記錄點

記錄點是中斷點的一種變體,它不會「中斷」到偵錯工具中,而是將訊息記錄到偵錯主控台。記錄點讓您可以在偵錯時插入記錄,而無需修改原始程式碼。當您正在偵錯無法暫停或停止的生產伺服器時,它們特別有用。記錄點也可以透過不必在程式碼中新增或移除記錄陳述式來幫助您節省時間。

記錄點會以「菱形」圖示表示。記錄訊息是純文字,但可以包含要在花括號 ('{}') 內評估的運算式。

使用左側編輯器裝訂邊內容功能表中的新增記錄點命令,或使用偵錯:新增記錄點...命令來新增記錄點。您也可以設定設定 debug.gutterMiddleClickAction,在編輯器裝訂邊中按下滑鼠中鍵時切換記錄點。

Logpoints

就像一般的中斷點一樣,記錄點可以啟用或停用,也可以透過條件和/或命中計數來控制。

注意:VS Code 的內建 Node.js 偵錯工具支援記錄點,但其他偵錯擴充功能也可以實作。例如,PythonJava 擴充功能支援記錄點。

資料檢查

可以在執行和偵錯檢視的變數區段中或藉由將滑鼠游標停留在編輯器中的來源上來檢查變數。變數值和運算式評估與呼叫堆疊區段中選取的堆疊框架相關。

Debug Variables

可以使用變數內容功能表中的設定值動作來修改變數值。此外,您可以使用複製值動作來複製變數的值,或使用複製為運算式動作來複製運算式以存取變數。

也可以在執行和偵錯檢視的監看區段中評估和監看變數和運算式。

Debug Watch

當焦點在變數區段時,可以透過輸入來篩選變數名稱和值。

Filtering in the Variables section

launch.json 屬性

有許多 launch.json 屬性可協助支援不同的偵錯工具和偵錯案例。如上所述,您可以使用 IntelliSense (⌃Space (Windows、Linux Ctrl+Space)) 來查看一旦您為 type 屬性指定值後可用的屬性清單。

launch json suggestions

下列屬性對於每個啟動組態都是必要的

  • type - 要用於此啟動組態的偵錯工具類型。每個已安裝的偵錯擴充功能都會引入一種類型:例如,內建 Node 偵錯工具的 node,或 PHP 和 Go 擴充功能的 phpgo
  • request - 此啟動組態的請求類型。目前支援 launchattach
  • name - 要顯示在 [偵錯] 啟動組態下拉式選單中的易讀名稱。

以下是一些適用於所有啟動組態的選用屬性

  • presentation - 使用 presentation 物件中的 ordergrouphidden 屬性,您可以在 [偵錯] 組態下拉式選單和 [偵錯快速選取] 中排序、群組和隱藏組態和複合。
  • preLaunchTask - 若要在偵錯工作階段開始之前啟動工作,請將此屬性設定為 tasks.json (在工作區的 .vscode 資料夾中) 中指定的工作標籤。或者,可以將此設定為 ${defaultBuildTask} 以使用您的預設建置工作。
  • postDebugTask - 若要在偵錯工作階段結束時啟動工作,請將此屬性設定為 tasks.json (在工作區的 .vscode 資料夾中) 中指定的工作名稱。
  • internalConsoleOptions - 此屬性會控制偵錯工作階段期間 [偵錯主控台] 面板的可見性。
  • debugServer - 僅適用於偵錯擴充功能作者:此屬性可讓您連線到指定的連接埠,而不是啟動偵錯介面卡。
  • serverReadyAction - 如果您想要在偵錯下的程式將特定訊息輸出到偵錯主控台或整合式終端機時,在網頁瀏覽器中開啟 URL。如需詳細資料,請參閱下方偵錯伺服器程式時自動開啟 URI 一節。

許多偵錯工具都支援下列一些屬性

  • program - 啟動偵錯工具時要執行的可執行檔或檔案
  • args - 傳遞至要偵錯之程式的引數
  • env - 環境變數 (值 null 可用於「取消定義」變數)
  • envFile - 具有環境變數的 dotenv 檔案路徑
  • cwd - 用於尋找相依性和其他檔案的目前工作目錄
  • port - 連線到執行中進程時的連接埠
  • stopOnEntry - 程式啟動時立即中斷
  • console - 要使用的控制台類型,例如 internalConsoleintegratedTerminalexternalTerminal

變數取代

VS Code 將常用的路徑和其他值作為變數提供,並支援在 launch.json 字串中使用變數替換。這表示您不必在偵錯設定中使用絕對路徑。例如,${workspaceFolder} 會提供工作區資料夾的根路徑,${file} 會提供在作用中編輯器中開啟的檔案,而 ${env:Name} 會提供名為「Name」的環境變數。

您可以在變數參考中查看預定義變數的完整清單,或是在 launch.json 字串屬性中呼叫 IntelliSense。

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

平台專屬屬性

Launch.json 支援定義依賴於偵錯工具執行所在作業系統的值(例如,要傳遞給程式的引數)。若要執行此操作,請將平台專用的常值放入 launch.json 檔案中,並在該常值內指定對應的屬性。

以下範例示範如何在 Windows 上以不同的方式將 "args" 傳遞給程式

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "args": ["myFolder/path/app.js"],
      "windows": {
        "args": ["myFolder\\path\\app.js"]
      }
    }
  ]
}

有效的作業系統屬性為 Windows 的 "windows"、Linux 的 "linux" 和 macOS 的 "osx"。在特定作業系統範圍內定義的屬性會覆寫在全域範圍內定義的屬性。

請注意,type 屬性不能放置在平台專用的區段內,因為在遠端偵錯的情況下,type 會間接決定平台,而這會導致循環依賴。

在以下範例中,除了 macOS 之外,偵錯程式一律會在進入時停止

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "stopOnEntry": true,
      "osx": {
        "stopOnEntry": false
      }
    }
  ]
}

全域啟動設定

VS Code 支援在您的使用者設定中新增 "launch" 物件。然後,此 "launch" 設定將在您的工作區之間共用。例如

"launch": {
    "version": "0.2.0",
    "configurations": [{
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${file}"
    }]
}

進階中斷點主題

條件中斷點

VS Code 強大的偵錯功能是可以根據運算式、命中次數或兩者的組合來設定條件。

  • 運算式條件:只要運算式評估為 true,就會命中中斷點。
  • 命中次數命中次數會控制中斷點需要被命中多少次才會中斷執行。命中次數是否被採納,以及運算式的確切語法,可能會因偵錯工具擴充功能而異。

您可以在建立原始碼中斷點時(使用新增條件中斷點動作)或在修改現有中斷點時(使用編輯條件動作)新增條件和/或命中次數。在這兩種情況下,都會開啟一個具有下拉式選單的內嵌文字方塊,您可以在其中輸入運算式

HitCount

函式函式和例外中斷點也支援條件和命中次數編輯。您可以從內容功能表或新的內嵌編輯條件動作啟動條件編輯。

中斷點檢視中編輯條件的範例:在中斷點檢視中編輯條件

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

觸發的中斷點

觸發的中斷點是在命中另一個中斷點後自動啟用的中斷點。當診斷程式碼中僅在特定前提條件之後發生的失敗案例時,它們非常有用。

可以透過右鍵按一下字形邊界,選取新增觸發的中斷點,然後選擇哪個其他中斷點啟用中斷點來設定觸發的中斷點。

觸發的中斷點適用於所有語言,條件中斷點也可以用作觸發點。

內嵌中斷點

只有在執行到達與內嵌中斷點關聯的資料行時,才會命中內嵌中斷點。當偵錯在單行中包含多個陳述式的縮小程式碼時,這特別有用。

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

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

函式中斷點

偵錯工具可以透過指定函式名稱來支援建立中斷點,而不是將中斷點直接放置在原始碼中。在無法使用原始碼但知道函式名稱的情況下,這非常有用。

透過按一下中斷點區段標頭中的+按鈕並輸入函式名稱來建立函式中斷點。函式中斷點會在中斷點區段中以紅色三角形顯示。

資料中斷點

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

偵錯主控台 REPL

可以使用偵錯主控台 REPL(讀取-評估-列印迴圈)功能評估運算式。若要開啟偵錯主控台,請使用「偵錯」窗格頂端的偵錯主控台動作或使用檢視:偵錯主控台命令(⇧⌘Y (Windows、Linux Ctrl+Shift+Y))。

當您按下 Enter 之後,會評估運算式,而偵錯主控台 REPL 會在您輸入時顯示建議。如果您需要輸入多行,請在行之間使用 Shift+Enter,然後使用 Enter 傳送所有行以進行評估。

偵錯主控台輸入會使用作用中編輯器的模式,這表示偵錯主控台輸入支援語法著色、縮排、自動關閉引號和其他語言功能。

Debug Console

注意:您必須處於執行中的偵錯工作階段才能使用偵錯主控台 REPL。

將輸入/輸出重新導向至/從偵錯目標

重新導向輸入/輸出是偵錯工具/執行階段專有的,因此 VS Code 沒有適用於所有偵錯工具的內建解決方案。

以下是您可能想要考慮的兩種方法

  1. 在終端機或命令提示字元中手動啟動要偵錯的程式(「偵錯目標」),並根據需要重新導向輸入/輸出。請務必將適當的命令列選項傳遞至偵錯目標,以便偵錯工具可以附加至它。建立並執行附加至偵錯目標的「附加」偵錯設定。

  2. 如果您使用的偵錯工具擴充功能可以在 VS Code 的整合式終端機(或外部終端機)中執行偵錯目標,您可以嘗試將 Shell 重新導向語法(例如,「<」或「>」)作為引數傳遞。

    以下是 launch.json 設定的範例

    {
      "name": "launch program that reads a file from stdin",
      "type": "node",
      "request": "launch",
      "program": "program.js",
      "console": "integratedTerminal",
      "args": ["<", "in.txt"]
    }
    

    此方法要求「<」語法透過偵錯工具擴充功能傳遞,並以未修改的方式結束在整合式終端機中。

多目標偵錯

對於涉及多個程序的複雜案例(例如,用戶端和伺服器),VS Code 支援多目標偵錯。在您啟動第一個偵錯工作階段後,您可以啟動另一個偵錯工作階段。一旦第二個工作階段啟動並執行,VS Code UI 就會切換到多目標模式

  • 個別工作階段現在會顯示為呼叫堆疊檢視中的最上層元素。

    Callstack View

  • 偵錯工具列會顯示目前作用中工作階段(所有其他工作階段都可在下拉式選單中使用)。

    Debug Actions Widget

  • 偵錯動作(例如,偵錯工具列中的所有動作)會在作用中工作階段上執行。可以透過使用偵錯工具列中的下拉式選單或在呼叫堆疊檢視中選取不同的元素來變更作用中工作階段。

複合啟動設定

啟動多個偵錯工作階段的另一種方式是使用複合啟動設定。您可以在 launch.json 檔案中的 compounds 屬性中定義複合啟動設定。使用 configurations 屬性列出應平行啟動的兩個或更多啟動設定的名稱。您可以選擇性地指定在啟動個別偵錯工作階段之前執行的 preLaunchTask。布林值旗標 stopAll 會控制手動終止一個工作階段是否會停止所有複合工作階段。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Server",
      "program": "${workspaceFolder}/server.js"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Client",
      "program": "${workspaceFolder}/client.js"
    }
  ],
  "compounds": [
    {
      "name": "Server/Client",
      "configurations": ["Server", "Client"],
      "preLaunchTask": "${defaultBuildTask}",
      "stopAll": true
    }
  ]
}

複合啟動設定會顯示在啟動設定下拉式選單中。

遠端偵錯

VS Code 不支援跨所有語言的內建遠端偵錯。遠端偵錯是您所使用偵錯擴充功能的一項功能,您應查閱Marketplace中的擴充功能頁面,以了解支援和詳細資訊。

但是,有一個例外:VS Code 中包含的 Node.js 偵錯工具支援遠端偵錯。請參閱Node.js 偵錯主題,以了解如何設定此功能。

偵錯伺服器程式時自動開啟 URI

開發網頁程式通常需要在網頁瀏覽器中開啟特定 URL,才能在偵錯工具中命中伺服器程式碼。VS Code 具有內建的「serverReadyAction」功能來自動化此工作。

以下是簡單的 Node.js Express 應用程式範例

var express = require('express');
var app = express();

app.get('/', function(req, res) {
  res.send('Hello World!');
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!');
});

此應用程式首先會為「/」URL 安裝「Hello World」處理常式,然後開始接聽連接埠 3000 的 HTTP 連線。此連接埠會在偵錯主控台中公佈,而通常,開發人員現在會在他們的瀏覽器應用程式中輸入 http://localhost:3000

serverReadyAction 功能可讓您將結構化屬性 serverReadyAction 新增至任何啟動設定,並選取要執行的「動作」

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",

  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%s",
    "action": "openExternally"
  }
}

此處的 pattern 屬性描述用於比對程式公佈連接埠的輸出字串的規則運算式。連接埠號碼的模式會放在括號中,使其可用作規則運算式擷取群組。在此範例中,我們僅擷取連接埠號碼,但也可以擷取完整的 URI。

uriFormat 屬性描述如何將連接埠號碼轉換為 URI。第一個 %s 會被比對模式的第一個擷取群組取代。

然後,會使用為 URI 的配置設定的標準應用程式,在 VS Code 之外(「外部」)開啟產生的 URI。

透過 Edge 或 Chrome 觸發偵錯

或者,可以將 action 設定為 debugWithEdgedebugWithChrome。在此模式中,可以新增傳遞至 Chrome 或 Edge 偵錯工作階段的 webRoot 屬性。

為了簡化一些事情,大多數屬性都是選擇性的,我們使用以下的回退值

  • pattern: "listening on.* (https?://\\S+|[0-9]+)",此模式會比對常見的訊息,例如「listening on port 3000」或「Now listening on: https://localhost:5001」。
  • uriFormat: "http://localhost:%s"
  • webRoot: "${workspaceFolder}"

觸發任意的啟動設定

在某些情況下,您可能需要為瀏覽器偵錯工作階段設定其他選項,或完全使用不同的偵錯工具。您可以將 action 設定為 startDebugging,並將 name 屬性設定為啟動設定的名稱,以便在比對到 pattern 時啟動該設定。

指定的啟動設定必須與包含 serverReadyAction 的設定檔位於相同檔案或資料夾中。

以下是 serverReadyAction 功能的實際應用

Server ready feature in action

後續步驟

若要了解 VS Code 的 Node.js 偵錯支援,請參閱

  • Node.js - 說明 VS Code 內建的 Node.js 偵錯工具。
  • TypeScript - Node.js 偵錯工具也支援 TypeScript 偵錯。

若要觀看偵錯基礎教學,請查看此影片

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

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

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

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

常見問題

支援哪些偵錯情境?

VS Code 預設支援在 Linux、macOS 和 Windows 上偵錯基於 Node.js 的應用程式。許多其他情境可透過 Marketplace 中提供的 VS Code 擴充功能 來支援。

我在「執行和偵錯」檢視的下拉式選單中看不到任何啟動設定。哪裡出錯了?

最常見的問題是您未設定 launch.json 或該檔案中有語法錯誤。或者,您可能需要開啟資料夾,因為無資料夾偵錯不支援啟動設定。