本站点文档内容均翻译自code.visualstudio.com,仅供个人学习,如有差异请以官网为准。

集成浏览器

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

VS Code中集成浏览器显示网页的截图。

注意

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

打开浏览器

运行 浏览器:打开集成浏览器 命令从命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P))。

您可以同时打开多个浏览器实例,每个实例都在自己的编辑器标签页中。

启用

工作台.浏览器.打开本地链接
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
设置自动打开本地主机在集成浏览器中而不是默认系统浏览器中输入URL。

导航

浏览器支持对不起,我无法访问特定的网页内容。如果你能提供具体的文本内容,我可以帮助你进行翻译。对不起,我无法访问任何网页内容。如果你能提供具体的文本内容,我可以帮助你进行翻译。,和文件://URL。使用地址栏导航到任何URL,或使用页面内链接在站点内导航。

  • 正常导航和锚链接按预期工作
  • Ctrl+点击 (Cmd+点击 在 macOS) 在新浏览器标签页中打开链接
  • 弹出Windows被阻止,但允许新标签页。

开发者工具

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

独立Windows

通过右键单击编辑器标签并选择移动到新Windows,将浏览器移动到其自己的浮动Windows。使用始终置顶,从浮动Windows的标题栏中保持其可见。

添加元素到AI聊天

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

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

配置包含哪些信息:

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

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

权限

浏览器自动拒绝大多数权限请求(相机、麦克风、地理位置)以确保安全。允许通知、剪贴板访问和文件选择。

会话存储

控制集成浏览器如何存储会话数据,例如cookies、登录信息、localStorage和缓存

工作台.浏览器.数据存储
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
设置。

模式 描述
全球 数据持久化并可在所有浏览器标签页和工作区之间共享。
工作区 数据持久化存在于一个工作区中,但在不同的工作区之间是隔离的。
短暂的 数据不会在标签页之间共享或持久化。类似于隐身模式。

要清除存储的数据,请在浏览器工具栏中选择菜单并选择清除存储(全局)清除存储(工作区),具体取决于您当前的存储模式。清除存储后,请重新加载浏览器标签以应用更改。

注意

在不可信的工作区中,浏览器无论设置如何,总是使用临时模式,以保护您的数据。

用作默认浏览器

VS Code 还有一个内置的 Simple Browser 用于预览网页,其功能相比集成浏览器有限。如果你想使用集成浏览器而不是 Simple Browser,请启用

简单浏览器使用集成浏览器
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
设置。

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

livePreview.使用集成浏览器
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
将其设置为默认预览浏览器。