在 VS Code 中除錯瀏覽器
Visual Studio Code 為 Edge 和 Chrome 內建了偵錯程式。有幾種方法可以開始使用它。
- 使用 開啟連結 命令來除錯一個 URL。
- 在 JavaScript 除錯終端中點選一個連結。
- 使用 啟動配置 來啟動一個帶有你的應用的瀏覽器。
我們也有更詳細的教程來幫助你開始使用 React、Angular 和 Vue，以及其他除錯技巧。
開啟連結命令
除錯網頁最簡單的方法是透過命令面板（⇧⌘P (Windows, Linux Ctrl+Shift+P)）中的 除錯：開啟連結 命令。執行此命令時，系統會提示你輸入一個要開啟的 URL，然後偵錯程式就會附加到該 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://: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 選項 文件中檢視完整的選項集。
webRoot- 你的原始碼的根目錄。在大多數情況下，並且預設情況下，webRoot就是你的工作區資料夾。此選項用於原始碼對映（sourcemap）解析。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 偵錯程式支援原始碼對映（source maps），這允許除錯轉換後的程式碼。例如，TypeScript 程式碼被編譯成 JavaScript，許多 Web 應用程式將它們所有的 JavaScript 檔案捆綁在一起。原始碼對映幫助偵錯程式找出如何在你的原始程式碼和在瀏覽器中執行的程式碼之間進行對映。
大多數用於構建 Web 應用程式的現代工具都能開箱即用。如果不行，我們關於 Node.js 中的原始碼對映部分包含了同樣適用於瀏覽器除錯的指導。
載入原始碼對映
每個 JavaScript 檔案都可以透過一個 URL 或相對路徑來引用一個原始碼對映。在處理 Web 應用程式時，你需要確保在 VS Code 中執行的偵錯程式可以訪問該 URL。如果不能，你會在除錯控制檯中看到錯誤，解釋哪些原始碼對映載入失敗以及原因。
如果無法直接訪問，VS Code 會嘗試使用瀏覽器的網路堆疊來請求原始碼對映。這為將瀏覽器中的任何身份驗證狀態或網路設定應用於請求提供了機會。例如，如果你的原始碼對映位於受 cookie 身份驗證保護的位置，VS Code 只有在瀏覽器會話具有必要的 cookie 時才能載入它們。