VS Code 中的瀏覽器偵錯

Visual Studio Code 內建了適用於 Edge 和 Chrome 的偵錯工具。您可以透過以下幾種方式開始使用：

使用開啟連結 (Open Link) 指令來偵錯網址。
點擊 JavaScript 偵錯終端機中的連結。
使用啟動設定 (launch config) 來啟動瀏覽器並執行您的應用程式。

您也可以在 VS Code 的整合瀏覽器 (integrated browser) 中偵錯網頁應用程式，而無需啟動外部瀏覽器。

我們還提供了更詳細的操作指南，協助您開始使用 React、Angular 和 Vue，以及其他偵錯實作秘訣 (recipes)。

開啟連結 (Open Link) 指令

偵錯網頁最簡單的方法是透過命令面板中的 Debug: Open Link 指令（⇧⌘P (Windows, Linux Ctrl+Shift+P)）。執行此指令時，系統會提示您輸入要開啟的網址，偵錯工具便會自動附加。

Using the Open Link command to attach to a URL

如果您的預設瀏覽器是 Edge，VS Code 將使用它來開啟頁面。否則，它會嘗試在您的系統中尋找已安裝的 Chrome。

啟動設定

啟動設定是 VS Code 中進行偵錯的傳統方式，它為執行複雜應用程式提供了最大的彈性。

在本節中，我們將詳細介紹進階偵錯情境的設定與功能。Node.js 跳過外部程式碼 (stepping over external code) 的相關說明也同樣適用於瀏覽器偵錯。

注意：如果您是剛開始使用 VS Code，可以在偵錯 (Debugging) 主題中了解一般偵錯功能以及如何建立 launch.json 設定檔。

啟動瀏覽器

在大多數情況下，您會希望啟動一個新的瀏覽器實例來偵錯您的網頁或檔案。為此，您可以建立一個名為 .vscode/launch.json 的檔案，內容如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch my cool app",
      "url": "https://:8000"
    }
  ]
}

當您按下 F5 或在 執行與偵錯 (Run and Debug) 檢視中點擊 開始 (Start) 按鈕時，https://:8000 將以偵錯模式開啟。如果您想使用 Chrome 而非 Edge，請將 msedge 取代為 chrome。

若要在不開啟外部瀏覽器的情況下在 VS Code 內部進行偵錯，請將類型 (type) 設為 editor-browser。深入了解在整合瀏覽器中偵錯。

您也可以在不執行伺服器的情况下偵錯單一檔案，例如：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch hello.html",
      "file": "${workspaceFolder}/hello.html"
    }
  ]
}

附加到瀏覽器 (Attaching to browsers)

若要附加到正在執行的瀏覽器，該瀏覽器必須以特殊的偵錯模式啟動。您可以使用以下指令來執行此操作，並將 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 或在 執行與偵錯 (Run and Debug) 檢視中點擊 開始 (Start) 按鈕來附加到正在執行的瀏覽器。您甚至可以加入 address 屬性來偵錯在不同機器上執行的瀏覽器。

啟動設定屬性

偵錯設定儲存在工作區 .vscode 資料夾中的 launch.json 檔案內。有關建立和使用偵錯設定檔的介紹，請參閱一般偵錯 (Debugging) 文章。您可以選擇「啟動 (launch)」一個帶有應用程式的瀏覽器，或「附加 (attach)」到您以偵錯模式啟動的現有瀏覽器。

以下是針對瀏覽器偵錯的常見 launch.json 屬性參考。您可以在 vscode-js-debug 選項文件中查看完整的選項集。

webRoot - 原始程式碼的根目錄。通常情況下（預設），webRoot 即為您的工作區資料夾。此選項用於來源對應檔 (sourcemap) 的解析。
outFiles - 用於尋找已產生之 JavaScript 檔案的 Glob 模式陣列。請參閱來源對應檔 (Source maps) 一節。
smartStep - 嘗試自動跳過未對應至原始程式檔的程式碼。請參閱智慧跳過 (Smart stepping) 一節。
skipFiles - 自動跳過符合這些 Glob 模式的檔案。請參閱跳過無關程式碼一節。
trace - 啟用診斷輸出。

這些屬性僅適用於請求類型為 launch 的啟動設定：

url - 啟動瀏覽器時自動開啟的網址。
runtimeExecutable - 可執行檔的絕對路徑，或是要使用的瀏覽器版本。有效版本包含 stable（預設）、canary、beta 和 dev。
runtimeArgs - 啟動瀏覽器時傳遞的選用參數。

這些屬性僅適用於請求類型為 attach 的啟動設定：

url - 如果提供，VS Code 將附加到具有此網址的分頁。若未提供，則會附加到所有瀏覽器分頁。
port - 用於瀏覽器遠端偵錯的埠口，需與啟動瀏覽器時使用的 --remote-debugging-port 相符。請參閱附加到瀏覽器一節。
address - 偵錯目標瀏覽器正在監聽的 IP 位址或主機名稱。請參閱附加到瀏覽器一節。

WebAssembly 偵錯

在瀏覽器中偵錯 WebAssembly 的方式與 Node.js 相同，請在此閱讀更多關於 WebAssembly 偵錯的資訊。

來源對應檔 (Source Maps)

VS Code 中的 JavaScript 偵錯工具支援允許偵錯轉換後程式碼的來源對應檔。例如，TypeScript 程式碼會被編譯為 JavaScript，且許多網頁應用程式會將所有 JavaScript 檔案打包在一起。來源對應檔有助於偵錯工具找出原始程式碼與在瀏覽器中執行之程式碼之間的對應關係。

大多數用於建置網頁應用程式的現代化工具都能直接運作。若無法運作，我們關於 Node.js 中來源對應檔的章節內容也適用於瀏覽器偵錯。

載入來源對應檔

每個 JavaScript 檔案可能會透過網址或相對路徑參照來源對應檔。處理網頁應用程式時，請確保 VS Code 中執行的偵錯工具可以存取該網址。如果無法存取，您會在 偵錯主控台 (Debug Console) 中看到錯誤訊息，說明哪些來源對應檔載入失敗及其原因。

如果無法直接存取，VS Code 會嘗試使用瀏覽器的網路堆疊來請求來源對應檔。這使得瀏覽器中的任何驗證狀態或網路設定皆可套用於請求。例如，如果您的來源對應檔位於受 Cookie 驗證保護的位置，則僅在瀏覽器工作階段具有必要 Cookie 時，VS Code 才能載入它們。

焦點模擬 (Focus emulation)

當您偵錯網頁應用程式並將焦點切換至 VS Code 時，瀏覽器頁面會失去焦點。這會導致 :focus CSS 樣式消失、document.hasFocus() 回傳 false，以及焦點事件處理常式無法如預期般觸發。

在瀏覽器偵錯工作階段中，執行與偵錯 (Run and Debug) 檢視中的 偵錯選項 (Debug Options) 面板提供了 模擬已聚焦頁面 (Emulate a focused page) 選項。啟用此選項後，即使 VS Code 處於前景，頁面表現起來也會像仍具備焦點一樣。此設定會在偵錯工作階段之間持續有效。

後續步驟

偵錯 (Debugging) - 了解一般 VS Code 偵錯功能。
偵錯實作秘訣 (Debugging Recipes) - 為您偏好的平台設定偵錯。

4/8/2026