整合式瀏覽器

整合式瀏覽器讓您能直接在 VS Code 內部開啟網頁並與其互動。您可以使用它來預覽 Web 應用程式、測試驗證流程，以及選取頁面元素以作為 AI 對話提示詞的背景資訊。

開啟瀏覽器

從命令面板（⇧⌘P (Windows, Linux Ctrl+Shift+P)）執行 Browser: Open Integrated Browser 命令。

您可以同時開啟多個瀏覽器執行個體，每個執行個體都會在各自的編輯器分頁中呈現。

啟用 workbench.browser.openLocalhostLinks 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定，即可將 localhost URL 自動改為在整合式瀏覽器中開啟，而非系統預設瀏覽器。

當瀏覽器分頁已開啟時，標題列上的地球按鈕會開啟分頁管理的快速選取器，而不是建立新的瀏覽器分頁。使用 workbench.browser.showInTitleBar 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定來控制地球按鈕是否顯示在標題列中。

瀏覽導覽

此瀏覽器支援 http://、https:// 和 file:// URL。請使用網址列導覽至任何 URL，或使用頁面內的連結在網站內瀏覽。

• 一般導覽與錨點連結皆可正常運作
• Ctrl+按一下（macOS 為 Cmd+按一下）可在新的瀏覽器分頁中開啟連結
• 彈出視窗會被封鎖，但允許開啟新分頁

分頁管理

使用 Browser: Quick Open Browser Tab... 命令（⇧⌘A (Windows, Linux Ctrl+Shift+A)）可在已開啟的瀏覽器分頁之間快速切換。快速選取器會按編輯器群組列出所有開啟的分頁，您可以輸入文字來依分頁名稱或 URL 篩選。

透過快速選取器，您可以：

• 選取一個分頁以切換至該分頁
• 選取 New Integrated Browser Tab 以開啟新的瀏覽器分頁
• 選取分頁上的關閉按鈕以關閉該分頁
• 選取 Close All 按鈕以關閉所有瀏覽器分頁

您也可以使用下列命令關閉瀏覽器分頁

Close All Browser Tabs 選項也提供於瀏覽器編輯器分頁的右鍵關聯選單中。

開發人員工具

從瀏覽器工具列切換瀏覽器的開發人員工具，以檢查元素、檢視主控台輸出並偵錯頁面問題。

偵錯

您可以透過在 launch.json 設定中使用 editor-browser 偵錯類型，直接在整合式瀏覽器中偵錯 Web 應用程式。啟動新的瀏覽器分頁並附加偵錯工具，或附加到已開啟的分頁。這適用於任何支援 Visual Studio Code Desktop 的環境，即使未安裝外部瀏覽器也能運作。

啟動偵錯工作階段

若要啟動新的整合式瀏覽器分頁並開始偵錯，請將啟動設定新增至您的 .vscode/launch.json 檔案

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "editor-browser",
      "request": "launch",
      "name": "Launch in integrated browser",
      "url": "https://:8000"
    }
  ]
}

按下 F5 即可在整合式瀏覽器中開啟 URL 並附加偵錯工具。中斷點、逐步執行與變數檢查等標準偵錯功能皆可正常運作。當您停止偵錯工作階段時，瀏覽器分頁會自動關閉。

附加到現有分頁

若要將偵錯工具附加到已開啟的整合式瀏覽器分頁，請使用附加設定

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "editor-browser",
      "request": "attach",
      "name": "Attach to integrated browser"
    }
  ]
}

當您啟動此設定時：

• 如果沒有開啟的整合式瀏覽器分頁，VS Code 會建立一個新分頁並附加到該分頁。
• 如果已開啟一個分頁，VS Code 會自動附加到該分頁。
• 如果開啟了多個分頁，選取器會讓您選擇要附加的分頁。

當您停止偵錯工作階段時，瀏覽器分頁會保持開啟。

若要自動附加到具有特定 URL 的分頁，請在設定中新增 urlFilter 屬性

{
  "type": "editor-browser",
  "request": "attach",
  "name": "Attach to localhost",
  "urlFilter": "https://:3000/*"
}

如果有一個分頁符合篩選條件，VS Code 會直接附加到該分頁。如果有多個分頁符合，選取器將僅顯示篩選後的結果。

如需啟動設定屬性的完整參考，請參閱 VS Code 中的瀏覽器偵錯。

獨立視窗

在編輯器分頁上按右鍵並選取 Move into New Window，即可將瀏覽器移至獨立的浮動視窗。使用浮動視窗標題列的 Set Always on Top 可保持視窗置頂。

將元素新增至 AI 對話

選取網頁中的元素，以將其作為聊天提示詞的背景資訊。這對於獲取特定 HTML 元素、CSS 樣式或偵錯 UI 問題的協助非常有幫助。

1. 開啟整合式瀏覽器並導覽至您的 Web 應用程式。
2. 選取瀏覽器工具列中的 Add Element to Chat 按鈕以進入選取模式。
3. 將滑鼠游標移至元素上並進行選取，以將其加入您的聊天提示詞。

設定包含的資訊

深入了解如何將背景資訊新增至聊天。

權限

基於安全考量，瀏覽器會自動拒絕大部分的權限要求（攝影機、麥克風、地理位置）。通知、剪貼簿存取權以及檔案選取功能則是被允許的。

工作階段儲存空間 (Session storage)

使用 workbench.browser.dataStorage 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定，控制整合式瀏覽器如何儲存工作階段資料，例如 Cookie、登入狀態、localStorage 和快取。

若要清除儲存的資料，請選取瀏覽器工具列中的選單，並根據您目前的儲存模式選擇 Clear Storage (Global) 或 Clear Storage (Workspace)。清除儲存空間後請重新載入瀏覽器分頁以套用變更。

與 Live Preview 擴充功能搭配使用

Live Preview 擴充功能可以使用整合式瀏覽器來預覽網頁。啟用 livePreview.useIntegratedBrowser 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定，即可將其作為預設預覽瀏覽器。

用於代理程式的瀏覽器工具

代理程式可以使用內建的瀏覽器工具來讀取並與整合式瀏覽器中的頁面互動。啟用後，代理程式可以開啟瀏覽器頁面、導覽至 URL、讀取頁面內容與主控台錯誤、截圖、點擊元素、輸入文字、懸停游標、拖曳元素、處理對話框以及執行 Playwright 程式碼，完全無需外部 MCP 伺服器。

瀏覽器工具與將元素新增至 AI 對話有所不同。元素選取功能可讓您手動挑選頁面元素作為聊天提示詞的背景資訊；而瀏覽器工具則讓代理程式能自主與網頁互動以完成任務。

若要啟用瀏覽器工具，請將 workbench.browser.enableChatTools 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定設為 true。代理程式便會自動取得這些工具的使用權限。

代理程式僅能存取由代理程式使用 openBrowserPage 工具所開啟的頁面，或是由您透過 Share with Agent 按鈕明確分享的頁面。未分享的頁面對代理程式而言是不可見的。

與代理程式分享瀏覽器頁面

若要讓代理程式讀取並與您已開啟的頁面互動，請選取瀏覽器工具列中的 Share with Agent 按鈕。系統會跳出確認對話框，要求您在代理程式取得存取權前進行核准。

瀏覽器分頁上的視覺指標會顯示該頁面目前正在共用中。若要停止共用，請再次選取 Share with Agent 按鈕，這會立即撤銷代理程式對該頁面的存取權。

現在，您可以要求代理程式讀取頁面內容或與其互動。例如，您可以詢問：「這個頁面的標題是什麼？」或是「點擊登入按鈕，並告訴我它是否運作正常。」

共用的頁面會使用您現有的瀏覽器工作階段，包含 Cookie 與登入狀態。由代理程式開啟的頁面則使用獨立的暫時性工作階段，因此不會與您的其他瀏覽器分頁共用 Cookie 或儲存空間。

相關資訊

• VS Code 中的瀏覽器偵錯
• 使用瀏覽器代理工具測試 Web 應用程式
• 將背景資訊新增至 AI 對話
• 連接埠轉送