VS Code 中的瀏覽器除錯
Visual Studio Code 內建了適用於 Edge 和 Chrome 的偵錯程式。有幾種方法可以開始使用它。
- 使用 開啟連結 命令除錯 URL。
- 點選 JavaScript 除錯終端 中的連結。
- 使用 啟動配置 來啟動具有你的應用程式的瀏覽器。
我們還提供了更詳細的教程，介紹如何開始使用 React、Angular 和 Vue，以及其他除錯 技巧。
開啟連結命令
除錯網頁最簡單的方法是透過命令面板中的 Debug: Open Link 命令（按 ⇧⌘P (Windows, Linux Ctrl+Shift+P)）。執行此命令後，系統將提示你輸入要開啟的 URL，然後偵錯程式將附加到該 URL。
如果你的預設瀏覽器是 Edge，VS Code 將使用它開啟頁面。否則，它將嘗試在你的系統上查詢 Chrome 的安裝。
啟動配置
啟動配置是 VS Code 中設定除錯的傳統方法，併為你提供了運行復雜應用程式的最大靈活性。
在本節中，我們將更詳細地介紹更高階除錯場景的配置和功能。Node.js 跳過不感興趣的程式碼 的說明也適用於基於瀏覽器的除錯。
注意：如果你剛開始使用 VS Code，可以在 除錯 主題中瞭解常規的 VS Code 除錯功能以及建立
launch.json配置檔案。
啟動瀏覽器
在大多數情況下，你希望啟動瀏覽器的新例項來除錯你的網頁或檔案。為此，你可以建立一個名為 .vscode/launch.json 的檔案，內容如下：
{
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "launch",
"name": "Launch my cool app",
"url": "https://:8000"
}
]
}
當你按下 F5 或在 執行和除錯 檢視中點選 開始 按鈕時，https://: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 options 文件中檢視完整的選項集。
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 身份驗證保護的位置，那麼只有當瀏覽器會話擁有必要的 Cookie 時，VS Code 才能載入它們。