在 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": "http://localhost:8000"
}
]
}
當您按下 F5 或 執行和偵錯 檢視中的 開始 按鈕時，將會在偵錯模式中開啟 http://localhost: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 應用程式時，您會想要確保 VS Code 中執行的偵錯工具可以存取 URL。如果無法存取，您會在 偵錯主控台 中看到錯誤，說明哪些來源對應載入失敗，以及原因。
如果無法直接存取，VS Code 會嘗試使用瀏覽器的網路堆疊來要求來源對應。這為瀏覽器中的任何驗證狀態或網路設定提供機會，以套用至要求。例如，如果您的來源對應位於 Cookie 驗證保護的位置，則 VS Code 只有在瀏覽器工作階段具有必要的 Cookie 時才能載入它們。