VS Code 中的瀏覽器偵錯
Visual Studio Code 內建適用於 Edge 和 Chrome 的偵錯工具。有幾種方式可以開始使用。
- 使用「開啟連結」命令來偵錯 URL。
- 按一下 JavaScript 偵錯終端機中的連結。
- 使用啟動設定以啟動瀏覽器和您的應用程式。
我們也有更詳細的逐步解說，可協助您開始使用 React、Angular 和 Vue，以及其他偵錯秘訣。
開啟連結命令
偵錯網頁最簡單的方式是透過命令調色盤中的「偵錯：開啟連結」命令 (⇧⌘P (Windows、Linux Ctrl+Shift+P))。當您執行此命令時，系統會提示您輸入要開啟的 URL，並附加偵錯工具。
如果您的預設瀏覽器是 Edge，VS Code 會使用它來開啟頁面。否則，它會嘗試在您的系統上尋找 Chrome 安裝。
啟動設定
啟動設定是在 VS Code 中設定偵錯的傳統方式，並為您提供執行複雜應用程式的最大彈性。
在本節中，我們將更詳細地介紹更進階偵錯案例的組態和功能。Node.js 逐步跳過外部程式碼的指示也適用於瀏覽器型偵錯。
注意：如果您剛開始使用 VS Code，您可以在「偵錯」主題中了解一般偵錯功能和建立
launch.json組態檔。
啟動瀏覽器
在大多數情況下，您會想要啟動瀏覽器的新執行個體，以偵錯您的網頁或檔案。若要執行此操作，您可以建立名為 .vscode/launch.json 的檔案，如下所示
{
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "launch",
"name": "Launch my cool app",
"url": "https://127.0.0.1:8000"
}
]
}
當您按下 F5 或「執行和偵錯」檢視中的「開始」按鈕時，https://127.0.0.1:8000 將在偵錯模式中開啟。如果您想要使用 Chrome 而非 Edge，請將 msedge 取代為 chrome。
您也可以偵錯單一檔案，而無需執行伺服器，例如
{
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "launch",
"name": "Launch hello.html",
"file": "${workspaceFolder}/hello.html"
}
]
}
附加至瀏覽器
若要附加至執行中的瀏覽器，需要以特殊的偵錯模式啟動。您可以使用下列命令執行此操作，並將 edge.exe 取代為 Edge 或 Chrome 二進位檔的路徑
edge.exe --remote-debugging-port=9222 --user-data-dir=remote-debug-profile
設定 --remote-debugging-port 會告知瀏覽器接聽該連接埠以進行偵錯連線。設定個別的 --user-data-dir 會強制開啟瀏覽器的新執行個體；如果未提供此旗標，則命令會開啟任何執行中瀏覽器的新視窗，且不會進入偵錯模式。
接下來，如下所示將新區段新增至 vscode/launch.json 檔案
{
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "attach",
"name": "Attach to browser",
"port": 9222
}
]
}
現在，您可以按下 F5 或「執行和偵錯」檢視中的「開始」按鈕，以附加至執行中的瀏覽器。您甚至可以新增 address 屬性來偵錯在不同機器上執行的瀏覽器。
啟動設定屬性
偵錯設定會儲存在工作區 .vscode 資料夾中的 launch.json 檔案中。一般「偵錯」文章中簡介了偵錯設定檔的建立和使用。您可以「啟動」瀏覽器和您的應用程式，或「附加」至您在偵錯模式中啟動的現有瀏覽器。
以下是特定於瀏覽器偵錯的常見 launch.json 屬性參考。您可以在 vscode-js-debug 選項文件中檢視完整的選項集。
webRoot- 原始碼的根目錄。通常且依預設，webRoot是您的工作區資料夾。此選項用於來源地圖解析。outFiles- 用於尋找產生的 JavaScript 檔案的 glob 模式陣列。請參閱「來源地圖」章節。smartStep- 嘗試自動逐步跳過未對應至原始檔的原始碼。請參閱「智慧型逐步偵錯」章節。skipFiles- 自動略過這些 glob 模式涵蓋的檔案。請參閱「略過不重要的程式碼」章節。trace- 啟用診斷輸出。
這些屬性僅適用於要求類型為 launch 的啟動設定
url- 啟動瀏覽器時自動開啟的 URL。runtimeExecutable- 要使用的瀏覽器可執行檔的絕對路徑，或要使用的瀏覽器版本。有效版本包括stable(預設)、canary、beta和dev。runtimeArgs- 啟動瀏覽器時傳遞的選用引數。
這些屬性僅適用於要求類型為 attach 的啟動設定
url- 如果提供，VS Code 會附加至具有此 URL 的索引標籤。如果未提供，它會附加至所有瀏覽器索引標籤。port- 用於遠端偵錯瀏覽器的連接埠，與啟動瀏覽器時使用的--remote-debugging-port相符。請參閱「附加至瀏覽器」章節。address- 偵錯的瀏覽器正在接聽的 IP 位址或主機名稱。請參閱「附加至瀏覽器」章節。
WebAssembly 偵錯
瀏覽器中的 WebAssembly 偵錯與 Node.js 相同，請在此處深入了解 WebAssembly 偵錯。
來源地圖
VS Code 中的 JavaScript 偵錯工具支援來源地圖，可讓您偵錯轉換後的程式碼。例如，TypeScript 程式碼會編譯為 JavaScript，而且許多 Web 應用程式會將其所有 JavaScript 檔案組合在一起。來源地圖可協助偵錯工具找出如何在您的原始程式碼與在瀏覽器中執行的程式碼之間進行對應。
大部分用於建置 Web 應用程式的現代工具都能立即運作。如果沒有，我們關於 Node.js 中來源地圖的章節也包含適用於瀏覽器偵錯的指引。
載入來源地圖
每個 JavaScript 檔案都可以透過 URL 或相對路徑參考來源地圖。處理 Web 應用程式時，您會想要確定 URL 是在 VS Code 中執行的偵錯工具可以存取的內容。如果無法存取，您會在「偵錯主控台」中看到錯誤，說明哪些來源地圖載入失敗，以及原因。
如果無法直接存取，VS Code 會嘗試使用瀏覽器的網路堆疊來要求來源地圖。這提供在瀏覽器中將任何驗證狀態或網路設定套用至要求的機會。例如，如果您的來源地圖位於受 Cookie 驗證保護的位置，則 VS Code 只有在瀏覽器工作階段具有必要的 Cookie 時才能載入它們。