集成浏览器

集成浏览器允许您直接在 VS Code 内部打开网页并与之交互。您可以使用它预览 Web 应用程序、测试身份验证流程，以及选择页面元素作为上下文添加到 AI 聊天提示词中。

Screenshot of the integrated browser in VS Code displaying a web page.

注意

集成浏览器目前是一项实验性功能，未来版本可能会有所变动。

打开浏览器

可以通过多种方式打开集成浏览器：

从命令面板运行 Browser: Open Integrated Browser 命令（⇧⌘P（Windows、Linux 为 Ctrl+Shift+P））。
在菜单栏中选择 View（视图） > Browser（浏览器），或使用快捷键 ⌥⌘/（Windows、Linux 为 Ctrl+Alt+/）。
选择 VS Code 标题栏中的地球图标按钮。使用 workbench.browser.showInTitleBar 在 VS Code 中打开在 VS Code Insiders 中打开设置来控制是否显示该地球图标按钮。
点击 VS Code 中任何位置（例如终端或聊天窗口）的 localhost 链接。通过 workbench.browser.openLocalhostLinks 在 VS Code 中打开在 VS Code Insiders 中打开设置启用此行为。
让 Agent 打开或与网页交互。请参阅用于 Agent 的浏览器工具。
使用 editor-browser 调试类型启动调试会话。请参阅调试。

您可以同时打开多个浏览器实例，每个实例在各自的编辑器标签页中。当浏览器标签页已打开时，View（视图） > Browser（浏览器） 菜单项和标题栏的地球图标按钮会打开标签页管理快速选择器，而不是创建新的浏览器标签页。

标签页管理

使用 Browser: Quick Open Browser Tab... 命令（⇧⌘A（Windows、Linux 为 Ctrl+Shift+A））快速切换打开的浏览器标签页。快速选择器会按编辑器组列出所有打开的标签页，您可以输入内容按名称或 URL 进行筛选。

在快速选择器中，您可以：

选择一个标签页以切换到它
选择 New Integrated Browser Tab（新建集成浏览器标签页） 以打开新标签页
选择标签页上的关闭按钮以将其关闭
选择 Close All（关闭所有） 按钮以关闭所有浏览器标签页

您也可以通过以下命令关闭浏览器标签页：

命令	描述
Browser: Close All Browser Tabs	关闭所有编辑器组中的所有浏览器标签页。
Browser: Close All Browser Tabs in Group	关闭当前编辑器组中的所有浏览器标签页。

Close All Browser Tabs（关闭所有浏览器标签页） 选项也可以在浏览器编辑器标签页的右键菜单中找到。

开发者工具

从浏览器工具栏切换浏览器的“开发者工具”，以检查元素、查看控制台输出并调试页面问题。

调试

您可以通过在 launch.json 配置中使用 editor-browser 调试类型，直接在集成浏览器中调试 Web 应用程序。启动一个带有调试器的新浏览器标签页，或附加到已打开的标签页。这可以在任何支持 VS Code Desktop 的地方运行，即使没有安装外部浏览器。

注意

editor-browser 调试类型尚不可用于 Run and Debug（运行和调试） 的自动检测流程。您需要手动将其添加到 launch.json 文件中。

启动调试会话

要启动一个新的集成浏览器标签页并开始调试，请将启动配置添加到您的 .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 聊天添加上下文

浏览器工具栏带有一个 Add to Chat（添加到聊天） 的拆分按钮，其中的操作允许您从当前页面捕获不同类型的上下文，并将其附加到您的聊天提示词中。这些操作也可以在命令面板中找到。

添加元素

从网页中选择元素，将其作为上下文添加到您的聊天提示词中。这对于获取特定 HTML 元素、CSS 样式或调试 UI 问题的帮助非常有用。

打开集成浏览器并导航到您的 Web 应用。
在浏览器工具栏中选择 Add Element to Chat（添加元素到聊天） 按钮以进入选择模式。
悬停在元素上并点击即可将其添加到您的聊天提示词中。

配置包含哪些信息

设置	描述
chat.sendElementsToChat.attachCSS 在 VS Code 中打开在 VS Code Insiders 中打开	包含选中元素的 CSS 样式
chat.sendElementsToChat.attachImages 在 VS Code 中打开在 VS Code Insiders 中打开	包含选中元素的截图

添加截图

捕获当前浏览器视口的截图，并将其作为图像附加到您的聊天提示词中。使用此功能可以询问布局问题、获取设计反馈或展示 Web 应用的当前状态。

从浏览器工具栏选择 Add Screenshot to Chat（添加截图到聊天），或运行 Browser: Add Screenshot to Chat 命令。截图会在聊天面板打开之前被捕获，因此它反映的是您所看到的页面状态。

添加控制台日志

捕获当前页面的控制台输出，并将其作为上下文附加到您的聊天提示词中。这对于调试 Web 应用中的运行时错误或意外行为非常有用。

从浏览器工具栏选择 Add Console Logs to Chat（添加控制台日志到聊天），或运行 Browser: Add Console Logs to Chat 命令。

了解更多关于向聊天添加上下文的信息。

权限

出于安全考虑，浏览器会自动拒绝大多数权限请求（相机、麦克风、地理位置）。允许使用通知、剪贴板访问和文件选择。

会话存储

使用 workbench.browser.dataStorage 在 VS Code 中打开在 VS Code Insiders 中打开设置，控制集成浏览器如何存储会话数据（如 Cookie、登录信息、localStorage 和缓存）。

模式	描述
`global（全局）`	数据会持久化，并在所有浏览器标签页和工作区之间共享。
`workspace（工作区）`	数据在工作区内持久化，但在不同工作区之间隔离。
`ephemeral（临时）`	数据不会在标签页间共享，也不会持久化。类似于隐身模式。

要清除存储的数据，请在浏览器工具栏的菜单中选择 Clear Storage (Global) 或 Clear Storage (Workspace)，具体取决于您当前的存储模式。清除存储后重新加载浏览器标签页以应用更改。

注意

在不受信任的工作区中，无论设置如何，浏览器始终使用临时模式，以保护您的数据。

配合 Live Preview 扩展使用

Live Preview 扩展可以使用集成浏览器来预览网页。启用 livePreview.useIntegratedBrowser 在 VS Code 中打开在 VS Code Insiders 中打开设置，将其作为默认预览浏览器。

用于 Agent 的浏览器工具

注意

用于 Agent 的浏览器工具目前处于实验阶段。

Agent 可以通过内置的浏览器工具阅读页面并与之交互。启用后，Agent 可以打开浏览器页面、导航到 URL、读取页面内容和控制台错误、截屏、点击元素、输入文本、悬停在元素上、拖拽元素、处理弹窗以及运行 Playwright 代码，所有这些都无需外部 MCP 服务器。

浏览器工具不同于向 AI 聊天添加上下文。“添加到聊天”操作允许您手动选择页面元素、捕获截图或附加控制台日志作为聊天提示词的上下文。而浏览器工具允许 Agent 自主与网页交互以完成任务。

要启用浏览器工具，请将 workbench.browser.enableChatTools 在 VS Code 中打开在 VS Code Insiders 中打开此设置由组织管理。请联系您的管理员进行更改。设置为 true。这样工具就会自动对 Agent 可用。

与 Agent 共享浏览器页面

要让 Agent 读取并与您打开的页面进行交互，请选择浏览器工具栏中的 Share with Agent（与 Agent 共享） 按钮。在 Agent 获得访问权限之前，会弹出一个确认对话框请求您批准共享。

浏览器标签页上的可视化指示器显示页面当前正在共享。要停止共享，请再次选择 Share with Agent（与 Agent 共享） 按钮。这会立即撤销 Agent 对该页面的访问权限。

您现在可以让 Agent 读取页面内容或与之交互。例如，您可以询问“页面的标题是什么？”或“点击登录按钮并告诉我它是否有效”。

共享页面使用您现有的浏览器会话，包括 Cookie 和登录状态。由 Agent 打开的页面使用隔离的临时会话，因此它们不会与其他浏览器标签页共享 Cookie 或存储。

当您有未共享的浏览器标签页打开时，Agent 可以检测到这些标签页并提示您进行共享。例如，如果您询问“这个浏览器页面上有什么？”而没有共享任何标签页，Agent 会显示一个轮播问答，让您选择是否共享某个标签页。

当 Agent 尝试打开新页面而您已经在同一域名下有打开的标签页时，系统会提示您共享现有标签页，而不是打开新页面。只会列出域名和端口匹配的标签页。如果您选择 No（否），Agent 将打开一个新标签页，并且只有该新标签页会被共享。

在自动驾驶模式下，共享请求会自动被拒绝，以保护您的隐私。