集成浏览器

集成浏览器使您能够在 VS Code 内部直接打开和交互网页。 使用它来预览 Web 应用程序、测试身份验证流程以及选择页面元素作为 AI 聊天提示的上下文。

打开浏览器

从命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 运行 Browser: Open Integrated Browser 命令。

您可以同时打开多个浏览器实例，每个实例都在自己的编辑器选项卡中。

启用

导航

浏览器支持 http://、https:// 和 file:// URL。 使用地址栏导航到任何 URL，或使用页面内链接在站点内导航。

• 正常的导航和锚链接按预期工作
• Ctrl+click (Cmd+click 在 macOS 上) 在新的浏览器选项卡中打开链接
• 弹出窗口被阻止，但允许新选项卡

开发者工具

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

独立窗口

通过右键单击编辑器选项卡并选择 Move into New Window 将浏览器移动到自己的浮动窗口。 使用浮动窗口标题栏中的 Set Always on Top 使其始终可见。

将元素添加到 AI 聊天

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

1. 打开集成浏览器并导航到您的 Web 应用程序。
2. 选择浏览器工具栏中的 Add Element to Chat 按钮以进入选择模式。
3. 将鼠标悬停在元素上并选择以将其添加到您的聊天提示中。

配置包含的信息

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

权限

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

会话存储

使用 控制集成浏览器如何存储会话数据，例如 Cookie、登录信息、localStorage 和缓存。

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

设为默认浏览器

VS Code 还内置了一个简单的浏览器来预览网页，与集成浏览器相比，其功能有限。 如果您想使用集成浏览器而不是简单浏览器，请启用

Live Preview 扩展可以使用集成浏览器来预览网页。 启用

用于代理的浏览器工具

代理可以使用内置的浏览器工具读取和交互集成浏览器中的页面。 启用后，代理可以打开浏览器页面、导航到 URL、读取页面内容和控制台错误、截取屏幕截图、单击元素、键入文本、将鼠标悬停在元素上、拖动元素、处理对话框以及运行 Playwright 代码，而无需外部 MCP 服务器。

浏览器工具与 将元素添加到 AI 聊天不同。 元素选择允许您手动选择页面元素作为聊天提示的上下文。 浏览器工具允许代理自主地与网页交互以完成任务。

要启用浏览器工具，请将

代理只能访问由代理使用 openBrowserPage 工具打开的浏览器页面，或由您使用 Share with Agent 按钮显式共享的页面。 未共享的页面对代理不可见。

与代理共享浏览器页面

要让代理读取和交互您打开的页面，请选择浏览器工具栏中的 Share with Agent 按钮。 确认对话框会要求您批准共享，然后代理才能访问。

浏览器选项卡上的视觉指示器显示当前正在共享页面。 要停止共享，请再次选择 Share with Agent 按钮。 这将立即撤销代理对该页面的访问权限。

现在，您可以要求代理从页面读取内容或与之交互。 例如，您可以询问“此页面的标题是什么？”或“单击登录按钮并告诉我是否有效。”

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

相关

• 使用浏览器代理工具测试 Web 应用程序
• 将上下文添加到 AI 聊天
• 端口转发