偵錯
Visual Studio Code 的主要功能之一是其出色的偵錯支援。VS Code 的內建偵錯工具可協助加速您的編輯、編譯和偵錯迴圈。Visual Studio Marketplace 提供了各種偵錯擴充功能,可為 VS Code 新增對其他語言和執行階段的偵錯支援。
本文說明 VS Code 的偵錯功能,以及如何開始在 VS Code 中進行偵錯。您也將了解如何使用 VS Code 中的 Copilot 來加速設定偵錯組態和啟動偵錯工作階段。
除了偵錯之外,您還可以利用 Copilot 來協助修正程式碼中的問題。在 Copilot 聊天中使用 /fix
提示來取得修正程式碼的建議,或使用Copilot > 修正編輯器內容功能表動作。深入了解使用 Copilot 修正程式碼中的問題。
以下影片示範如何在 VS Code 中開始進行偵錯。
如果您尚未訂閱 Copilot,請註冊 Copilot 免費方案,即可免費使用 Copilot。您將獲得每月完成次數和聊天互動次數的限制。
使用者介面
下圖顯示偵錯使用者介面的主要組件
- 執行和偵錯檢視:顯示與執行、偵錯和管理偵錯組態設定相關的所有資訊。
- 偵錯工具列:具有最常見偵錯動作的按鈕。
- 偵錯主控台:可檢視程式碼在偵錯工具中執行的輸出,並與之互動。
- 偵錯側邊欄:在偵錯工作階段期間,可讓您與呼叫堆疊、中斷點、變數和監看式變數互動。
- 執行選單:具有最常見的執行和偵錯命令。
執行和偵錯檢視
若要開啟執行和偵錯檢視,請選取 VS Code 側邊活動列中的執行和偵錯圖示。您也可以使用鍵盤快速鍵 ⇧⌘D (Windows、Linux Ctrl+Shift+D)。
執行和偵錯檢視會顯示與執行和偵錯相關的所有資訊,並具有包含偵錯命令和組態設定的頂端列。
如果尚未設定執行和偵錯 (尚未建立 launch.json
),VS Code 會顯示執行啟動檢視。
偵錯動作
偵錯工作階段開始後,偵錯工具列會出現在視窗頂端。
動作 | 說明 |
---|---|
繼續/暫停 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 具有 Node.js 執行階段的內建偵錯支援,並且可以偵錯 JavaScript、TypeScript 或任何其他轉譯為 JavaScript 的語言。
若要偵錯其他語言和執行階段 (包括 PHP、Ruby、Go、C#、Python、C++、PowerShell 和 許多其他語言),請在 Visual Studio Marketplace 中尋找 Debuggers
擴充功能,或選取頂層執行選單中的安裝其他偵錯工具。
以下是一些包含偵錯支援的熱門擴充功能
開始偵錯
-
為您的語言和執行階段安裝偵錯工具擴充功能。
VS Code 具有偵錯 Node.js、JavaScript 和 TypeScript 的內建支援。
-
您可以選擇性地設定
launch.json
啟動組態。對於簡單的應用程式,VS Code 會嘗試在沒有啟動組態的情況下偵錯您目前作用中的檔案。但是,對於大多數偵錯案例,都需要建立啟動組態檔。
提示Copilot 可以協助您為您的專案建立啟動組態。開啟 Copilot 聊天並輸入
/startDebugging
聊天提示,Copilot 將為您產生啟動組態。或者,輸入類似generate a launch config for a django app #codebase
的提示。 -
按下 F5,或按下執行和偵錯檢視中的綠色播放按鈕,以開始偵錯工作階段。
提示Copilot 可以協助您使用
copilot-debug
終端機命令來設定和啟動偵錯工作階段。輸入copilot-debug
,然後輸入執行應用程式的命令以開始偵錯工作階段。例如,輸入copilot-debug node /bin/www
或copilot-debug python app.py
,以啟動 Node.js 或 Python 應用程式的偵錯工作階段。
執行模式
除了偵錯程式之外,VS Code 也支援執行程式。偵錯:不使用偵錯功能啟動動作會以 ⌃F5 (Windows、Linux Ctrl+F5) 觸發,並使用目前選取的啟動組態。許多啟動組態屬性在「執行」模式中都受到支援。VS Code 會在程式執行時維護偵錯工作階段,而按下停止按鈕會終止程式。
執行動作一律可用,但並非所有偵錯工具擴充功能都支援「執行」。在這種情況下,「執行」與「偵錯」相同。
啟動組態
若要在 VS Code 中執行或偵錯簡單的應用程式,請在偵錯啟動檢視中選取執行和偵錯,或按下 F5,VS Code 會嘗試執行您目前作用中的檔案。
但是,對於大多數偵錯案例,建立啟動組態檔是有益的,因為它可讓您設定和儲存偵錯設定詳細資料。VS Code 會將偵錯組態資訊保留在 launch.json
檔案中,該檔案位於工作區 (專案根資料夾) 中的 .vscode
資料夾中,或位於您的使用者設定或工作區設定中。
若要建立 launch.json
檔案,請在執行啟動檢視中選取建立 launch.json 檔案。
VS Code 會嘗試自動偵測您的偵錯環境,但如果失敗,您可以手動選擇
以下是為 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
檔案新增至您的工作區。
即使您在 VS Code 中未開啟資料夾,您也可以偵錯簡單的應用程式,但無法管理啟動組態和設定進階偵錯。如果您未開啟資料夾,VS Code 狀態列會是紫色。
請注意,啟動組態中可用的屬性因偵錯工具而異。您可以使用 IntelliSense 建議 (⌃Space (Windows、Linux Ctrl+Space)) 來找出特定偵錯工具存在哪些屬性。所有屬性也都提供滑鼠停留在上方時的說明。
請勿假設一個偵錯工具可用的屬性也會自動適用於其他偵錯工具。如果您在啟動組態中看到紅色波浪底線,請將滑鼠停留在上方以了解問題為何,並嘗試在啟動偵錯工作階段之前修正這些問題。
檢閱所有自動產生的值,並確保它們對您的專案和偵錯環境有意義。
使用 AI 產生啟動組態
透過 VS Code 中的 Copilot,您可以加速為您的專案建立啟動組態的流程。若要使用 Copilot 產生啟動組態
-
使用 ⌃⌘I (Windows、Linux Ctrl+Alt+I) 開啟聊天檢視,或從標題列中的 Copilot 選單選取開啟聊天。
-
輸入
/startDebugging
聊天提示以產生偵錯組態。或者,您也可以輸入自訂提示,例如為 express 應用程式產生偵錯組態 #codebase。
如果您的工作區中有不同語言的檔案,這可能會很有用。
注意#codebase
聊天變數會為 Copilot 提供專案的內容,這有助於產生更精確的回應。 -
套用建議的組態,然後開始偵錯。
啟動與附加組態
在 VS Code 中,有兩種核心偵錯模式:啟動和附加,它們處理兩種不同的工作流程和開發人員區隔。根據您的工作流程,可能會很難知道哪種類型的組態適合您的專案。
如果您來自瀏覽器開發人員工具背景,您可能不習慣「從您的工具啟動」,因為您的瀏覽器執行個體已開啟。當您開啟開發人員工具時,您只是將開發人員工具附加至您開啟的瀏覽器索引標籤。另一方面,如果您來自伺服器或桌面背景,讓您的編輯器為您啟動您的處理序是很正常的,而且您的編輯器會自動將其偵錯工具附加至新啟動的處理序。
解釋 啟動 和 附加 之間差異的最佳方式是將 啟動 組態視為說明如何在偵錯模式中啟動應用程式的配方,在 VS Code 附加至應用程式之前,而 附加 組態則是說明如何將 VS Code 的偵錯工具連線至已在執行的應用程式或處理序的配方。
VS Code 偵錯工具通常支援在偵錯模式中啟動程式,或附加至已在偵錯模式中執行的程式。根據要求 (attach
或 launch
),需要不同的屬性,而 VS Code 的 launch.json
驗證和建議應該有助於此。
新增組態
若要將新組態新增至現有的 launch.json
,請使用下列其中一種技術
- 如果您的游標位於 configurations 陣列內,請使用 IntelliSense。
- 按下新增組態按鈕,以在陣列開頭叫用程式碼片段 IntelliSense。
- 在執行選單中選擇新增組態選項。
VS Code 也支援複合啟動組態,可同時啟動多個組態;如需更多詳細資料,請閱讀此章節。
為了開始偵錯工作階段,請先使用執行和偵錯檢視中的組態下拉式清單選取名為啟動程式的組態。設定好啟動組態後,請使用 F5 開始偵錯工作階段。
或者,您可以透過命令面板 (⇧⌘P (Windows、Linux Ctrl+Shift+P)) 執行您的組態,方法是篩選偵錯:選取並開始偵錯或輸入 'debug '
並選取您要偵錯的組態。
偵錯工作階段開始後,隨即會顯示 偵錯主控台 面板並顯示偵錯輸出,而且狀態列會變更色彩 (預設色彩佈景主題為橘色)
此外,偵錯狀態會出現在狀態列中,顯示作用中的偵錯組態。透過選取偵錯狀態,使用者可以變更作用中的啟動組態,並開始偵錯,而無需開啟執行和偵錯檢視。
中斷點
可以透過按一下編輯器邊界或在目前行上使用 F9 來切換中斷點。更精細的中斷點控制 (啟用/停用/重新套用) 可以在執行和偵錯檢視的 中斷點 區段中完成。
- 編輯器邊界中的中斷點通常會顯示為紅色實心圓圈。
- 停用的中斷點具有灰色實心圓圈。
- 當偵錯工作階段開始時,無法向偵錯工具註冊的中斷點會變更為灰色空心圓圈。如果在沒有即時編輯支援的偵錯工作階段執行時編輯來源,也可能會發生相同的情況。
如果偵錯工具支援在不同種類的錯誤或例外狀況時中斷,這些也會在 中斷點 檢視中提供。
重新套用所有中斷點命令會再次將所有中斷點設定為其原始位置。如果您的偵錯環境「延遲」且「錯放」尚未執行的原始程式碼中的中斷點,這會很有幫助。
您可以選擇性地透過啟用設定 debug.showBreakpointsInOverviewRuler,在編輯器的概觀尺規中顯示中斷點
記錄點
記錄點是中斷點的變體,它不會「中斷」到偵錯工具中,而是將訊息記錄到偵錯主控台。記錄點可讓您在偵錯時插入記錄,而無需修改原始程式碼。當您偵錯無法暫停或停止的生產伺服器時,它們特別有用。記錄點也可以協助您節省時間,而無需在程式碼中新增或移除記錄陳述式。
記錄點以「菱形」圖示表示。記錄訊息是純文字,但可以包含要在大括號 ('{}') 內評估的運算式。
使用左側編輯器邊界內容選單中的新增記錄點命令,或使用偵錯:新增記錄點...命令來新增記錄點。您也可以設定設定 debug.gutterMiddleClickAction,以在按下編輯器邊界中的滑鼠中鍵時切換記錄點。
就像一般中斷點一樣,記錄點可以啟用或停用,也可以由條件和/或命中計數控制。
資料檢查
可以在執行和偵錯檢視的 變數 區段中檢查變數,或將滑鼠停留在編輯器中其來源的上方。變數值和運算式評估與 呼叫堆疊 區段中選取的堆疊框架相關。
可以使用變數內容選單中的設定值動作來修改變數值。此外,您可以使用複製值動作來複製變數的值,或使用複製為運算式動作來複製存取變數的運算式。
也可以在執行和偵錯檢視的 監看式 區段中評估和監看變數和運算式。
可以在焦點位於 變數 區段時,透過輸入來篩選變數名稱和值。
Launch.json 屬性
有許多 launch.json
屬性可協助支援不同的偵錯工具和偵錯案例。如上所述,在您為 type
屬性指定值之後,可以使用 IntelliSense (⌃Space (Windows、Linux Ctrl+Space)) 來查看可用屬性的清單。
下列屬性對於每個啟動組態都是必要的
type
- 用於此啟動組態的偵錯工具類型。每個已安裝的偵錯擴充功能都會引入一種類型:例如,內建 Node 偵錯工具的node
,或 PHP 和 Go 擴充功能的php
和go
。request
- 此啟動組態的要求類型。目前,支援 launch 和attach
。name
- 要顯示在偵錯啟動組態下拉式清單中的易讀名稱。
以下是一些適用於所有啟動組態的選用屬性
presentation
- 使用presentation
物件中的order
、group
和hidden
屬性,您可以在偵錯組態下拉式清單和偵錯快速選取中排序、群組和隱藏組態和複合。preLaunchTask
- 若要在偵錯工作階段開始之前啟動工作,請將此屬性設定為 tasks.json (在工作區的.vscode
資料夾中) 中指定的工作標籤。或者,可以將其設定為${defaultBuildTask}
以使用您的預設建置工作。postDebugTask
- 若要在偵錯工作階段結束時啟動工作,請將此屬性設定為 tasks.json (在工作區的.vscode
資料夾中) 中指定的工作名稱。internalConsoleOptions
- 此屬性控制偵錯工作階段期間偵錯主控台面板的可見性。debugServer
- 僅適用於偵錯擴充功能作者:此屬性可讓您連線到指定的連接埠,而不是啟動偵錯配接器。serverReadyAction
- 如果您想要在偵錯中的程式將特定訊息輸出到偵錯主控台或整合式終端機時,在網頁瀏覽器中開啟 URL。如需詳細資訊,請參閱下方的偵錯伺服器程式時自動開啟 URI 章節。
許多偵錯工具都支援下列某些屬性
program
- 啟動偵錯工具時要執行的可執行檔或檔案args
- 傳遞至要偵錯程式的引數env
- 環境變數 (值null
可用於「取消定義」變數)envFile
- 包含環境變數的 dotenv 檔案路徑cwd
- 用於尋找相依性和其他檔案的目前工作目錄port
- 附加至執行中處理序時的連接埠stopOnEntry
- 程式啟動時立即中斷console
- 要使用的主控台類型,例如internalConsole
、integratedTerminal
或externalTerminal
變數替換
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
時,就會命中中斷點。 - 命中計數:命中計數控制中斷點需要命中多少次才會中斷執行。命中計數是否受到尊重,以及運算式的確切語法,可能會因偵錯工具擴充功能而異。
您可以在建立來源中斷點時 (使用新增條件式中斷點動作) 或修改現有中斷點時 (使用編輯條件動作) 新增條件和/或命中計數。在這兩種情況下,都會開啟包含下拉式選單的內嵌文字方塊,您可以在其中輸入運算式
也支援為函式和例外狀況中斷點提供條件和命中計數編輯支援。您可以從內容選單或新的內嵌編輯條件動作啟動條件編輯。
中斷點檢視中的條件編輯範例:
如果偵錯工具不支援條件式中斷點,則新增條件式中斷點和編輯條件動作將無法使用。
觸發的中斷點
觸發的中斷點是在命中另一個中斷點後自動啟用的中斷點。當診斷僅在特定先決條件之後發生的程式碼中的失敗案例時,它們可能非常有用。
可以透過以滑鼠右鍵按一下字形邊界、選取新增觸發的中斷點,然後選擇哪個其他中斷點啟用中斷點來設定觸發的中斷點。
觸發的中斷點適用於所有語言,而條件式中斷點也可以用做觸發器。
內嵌中斷點
只有當執行到達與內嵌中斷點相關聯的資料行時,才會命中內嵌中斷點。這在偵錯單行包含多個陳述式的最小化程式碼時特別有用。
可以使用 ⇧F9 (Windows、Linux Shift+F9) 或透過偵錯工作階段期間的內容選單來設定內嵌中斷點。內嵌中斷點會內嵌顯示在編輯器中。
內嵌中斷點也可以有條件。透過編輯器左邊界中的內容選單,可以編輯行上的多個中斷點。
函式中斷點
偵錯工具可以透過指定函式名稱來支援建立中斷點,而不是直接在原始程式碼中放置中斷點。這在原始程式碼不可用但知道函式名稱的情況下很有用。
函式中斷點是透過按下 中斷點 區段標頭中的 + 按鈕並輸入函式名稱來建立。函式中斷點會在 中斷點 區段中以紅色三角形顯示。
資料中斷點
如果偵錯工具支援資料中斷點,則可以從 變數 檢視的內容選單中設定資料中斷點。在值變更/讀取/存取時中斷命令會新增一個資料中斷點,當基礎變數的值變更/讀取/存取時,就會命中該中斷點。資料中斷點會在 中斷點 區段中以紅色六邊形顯示。
偵錯主控台 REPL
可以使用 偵錯主控台 REPL (Read-Eval-Print Loop) 功能來評估運算式。若要開啟偵錯主控台,請使用偵錯窗格頂端的 偵錯主控台 動作,或使用檢視:偵錯主控台命令 (⇧⌘Y (Windows、Linux Ctrl+Shift+Y))。
在您按下 Enter 後,就會評估運算式,而偵錯主控台 REPL 會在您輸入時顯示建議。如果您需要輸入多行,請在各行之間使用 Shift+Enter,然後使用 Enter 傳送所有行進行評估。
偵錯主控台輸入使用作用中編輯器的模式,這表示偵錯主控台輸入支援語法色彩標示、縮排、自動關閉引號和其他語言功能。
您必須在執行中的偵錯工作階段中才能使用偵錯主控台 REPL。
重新導向輸入/輸出至/從偵錯目標
重新導向輸入/輸出是偵錯工具/執行階段特定的,因此 VS Code 沒有適用於所有偵錯工具的內建解決方案。
以下是您可能想要考慮的兩種方法
-
在終端機或命令提示字元中手動啟動要偵錯的程式 («偵錯目標»),並視需要重新導向輸入/輸出。請務必將適當的命令列選項傳遞至偵錯目標,以便偵錯工具可以附加至它。建立並執行「附加」偵錯組態,該組態會附加至偵錯目標。
-
如果您使用的偵錯工具擴充功能可以在 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 會切換到多目標模式
-
個別的工作階段現在會顯示為呼叫堆疊檢視中的頂層元素。
-
偵錯工具列會顯示目前作用中的工作階段(所有其他工作階段都可以在下拉式選單中找到)。
-
偵錯動作(例如,偵錯工具列中的所有動作)會在作用中的工作階段上執行。作用中的工作階段可以透過使用偵錯工具列中的下拉式選單,或在呼叫堆疊檢視中選取不同的元素來變更。
複合啟動組態
啟動多個偵錯工作階段的另一種方法是使用複合啟動組態。您可以在 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
開發 Web 程式通常需要在 Web 瀏覽器中開啟特定的 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 連線。連接埠會在偵錯主控台中宣告,通常,開發人員現在會在他們的瀏覽器應用程式中輸入 https://127.0.0.1:3000
。
serverReadyAction 功能使得可以將結構化屬性 serverReadyAction
新增到任何啟動組態,並選取要執行的「動作」。
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/app.js",
"serverReadyAction": {
"pattern": "listening on port ([0-9]+)",
"uriFormat": "https://127.0.0.1:%s",
"action": "openExternally"
}
}
這裡,pattern
屬性描述用於比對程式輸出字串的正規表示式,該字串會宣告連接埠。連接埠號碼的模式放在括號中,以便它可以作為正規表示式擷取群組使用。在此範例中,我們僅擷取連接埠號碼,但也可以擷取完整的 URI。
uriFormat
屬性描述如何將連接埠號碼轉換為 URI。第一個 %s
會被比對模式的第一個擷取群組取代。
然後,產生的 URI 會在 VS Code 外部(「外部」)以針對 URI 的協定配置的標準應用程式開啟。
透過 Edge 或 Chrome 觸發偵錯
或者,action
可以設定為 debugWithEdge
或 debugWithChrome
。在此模式下,可以新增一個 webRoot
屬性,該屬性會傳遞至 Chrome 或 Edge 偵錯工作階段。
為了簡化操作,大多數屬性都是選填的,我們使用以下回退值:
- pattern:
"listening on.* (https?://\\S+|[0-9]+)"
,它比對常用的訊息「listening on port 3000」或「Now listening on: https://127.0.0.1:5001」。 - uriFormat:
"https://127.0.0.1:%s"
- webRoot:
"${workspaceFolder}"
觸發任意啟動組態
在某些情況下,您可能需要為瀏覽器偵錯工作階段設定其他選項,或完全使用不同的偵錯工具。您可以透過將 action
設定為 startDebugging
,並將 name
屬性設定為在比對到 pattern
時要啟動的啟動組態的名稱來執行此操作。
具名的啟動組態必須與具有 serverReadyAction
的啟動組態位於相同檔案或資料夾中。
這裡展示 serverReadyAction 功能的實際運作情況
後續步驟
若要了解 VS Code 的 Node.js 偵錯支援,請參閱
- Node.js - 說明 VS Code 內含的 Node.js 偵錯工具。
- TypeScript - Node.js 偵錯工具也支援 TypeScript 偵錯。
若要觀看關於偵錯基礎知識的教學課程,請查看此影片
- VS Code 偵錯入門 - 了解 VS Code 中的偵錯。
若要深入了解 Copilot 和 VS Code 中 AI 輔助的偵錯
若要了解透過 VS Code 擴充功能對其他程式設計語言的偵錯支援
若要了解 VS Code 的工作執行支援,請前往
- 工作 - 說明如何使用 Gulp、Grunt 和 Jake 執行工作,以及如何顯示錯誤和警告。
若要撰寫您自己的偵錯工具擴充功能,請造訪
- 偵錯工具擴充功能 - 使用模擬範例來說明建立 VS Code 偵錯擴充功能所需的步驟。
常見問題
支援哪些偵錯情境?
VS Code 預設支援在 Linux、macOS 和 Windows 上對基於 Node.js 的應用程式進行偵錯。Marketplace 中提供的 VS Code 擴充功能 支援許多其他情境。
我在「執行和偵錯」檢視下拉式選單中看不到任何啟動組態。哪裡出錯了?
最常見的問題是您未設定 launch.json
,或者該檔案中存在語法錯誤。或者,您可能需要開啟資料夾,因為無資料夾偵錯不支援啟動組態。