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

集成浏览器目前是一个实验性功能,未来版本可能会有所改变。
打开浏览器
运行 浏览器:打开集成浏览器 命令从命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P))。
您可以同时打开多个浏览器实例,每个实例都在自己的编辑器标签页中。
启用
本地主机在集成浏览器中而不是默认系统浏览器中输入URL。
导航
浏览器支持对不起,我无法访问特定的网页内容。如果你能提供具体的文本内容,我可以帮助你进行翻译。,对不起,我无法访问任何网页内容。如果你能提供具体的文本内容,我可以帮助你进行翻译。,和文件://URL。使用地址栏导航到任何URL,或使用页面内链接在站点内导航。
- 正常导航和锚链接按预期工作
- Ctrl+点击 (Cmd+点击 在 macOS) 在新浏览器标签页中打开链接
- 弹出Windows被阻止,但允许新标签页。
开发者工具
从浏览器工具栏切换浏览器的开发者工具来检查元素,查看控制台输出,并调试页面问题。
独立Windows
通过右键单击编辑器标签并选择移动到新Windows,将浏览器移动到其自己的浮动Windows。使用始终置顶,从浮动Windows的标题栏中保持其可见。
添加元素到AI聊天
选择网页中的元素并将其添加到聊天提示中作为上下文。这有助于获取特定HTML元素、CSS样式或调试UI问题的帮助。
- 打开集成浏览器并导航到您的网页应用程序。
- 选择聊天中添加元素按钮以进入选择模式。
- 将鼠标悬停在元素上并选择将其添加到聊天提示中。
配置包含哪些信息:
| 设置 | 描述 |
|---|---|
chat.sendElementsToChat.attachCSS |
包含选定元素的CSS样式 |
chat.sendElementsToChat.attachImages |
包括所选元素的截图 |
了解更多关于在聊天中添加上下文的信息。
权限
浏览器自动拒绝大多数权限请求(相机、麦克风、地理位置)以确保安全。允许通知、剪贴板访问和文件选择。
会话存储
控制集成浏览器如何存储会话数据,例如cookies、登录信息、localStorage和缓存
| 模式 | 描述 |
|---|---|
全球 |
数据持久化并可在所有浏览器标签页和工作区之间共享。 |
工作区 |
数据持久化存在于一个工作区中,但在不同的工作区之间是隔离的。 |
短暂的 |
数据不会在标签页之间共享或持久化。类似于隐身模式。 |
要清除存储的数据,请在浏览器工具栏中选择菜单并选择清除存储(全局)或清除存储(工作区),具体取决于您当前的存储模式。清除存储后,请重新加载浏览器标签以应用更改。
在不可信的工作区中,浏览器无论设置如何,总是使用临时模式,以保护您的数据。
用作默认浏览器
VS Code 还有一个内置的 Simple Browser 用于预览网页,其功能相比集成浏览器有限。如果你想使用集成浏览器而不是 Simple Browser,请启用
Live preview扩展可以使用集成浏览器预览网页。启用