嵌入式浏览器 —— 概述

嵌入式浏览器是一个内置于 1DevTool 中的完整 Chromium webview，作为可停靠面板使用。你可以在终端中运行开发服务器，同时在浏览器面板中查看应用 —— 两者在同一窗口中同时可见。无需再在终端和 Chrome 之间 Alt-Tab 或 Cmd-Tab 切换。

为什么重要

没有嵌入式浏览器的典型开发循环是这样的：编辑代码，切换到终端，运行服务器，切换到 Chrome，刷新页面，发现问题，切换回终端，然后重复。每次上下文切换都会浪费时间并打断你的专注。

使用嵌入式浏览器面板后，循环变为：编辑代码，观察终端，瞥一眼浏览器面板。一切同时可见。当 AI agent 为你构建功能时，你可以看着它在终端中编码，同时在浏览器面板中看到结果出现，无需触碰键盘。

嵌入式浏览器支持什么

浏览器面板使用真实的 Chromium 引擎，因此它的行为与 Chrome 完全相同：

• JavaScript —— 完全运行，包括现代 ES2020+ 特性
• 本地存储和 cookie —— 在页面加载之间持久化，因此登录会话和偏好设置可以正常工作
• WebSockets —— 实时热重载和热模块替换（HMR）与 Vite 和 Next.js 等开发服务器正常工作
• CSS 和动画 —— 完全按照浏览器的方式渲染所有内容

这不是一个简化的预览引擎。如果你的应用在 Chrome 中能运行，它在嵌入式浏览器面板中也能运行。

如何打开浏览器面板

点击任何面板区域顶部面板工具栏中的 Browser 图标。浏览器面板会打开，顶部显示地址栏。输入 URL 并按 Enter 导航。

或者，使用 Add Panel 菜单将浏览器添加到工作区布局的任何区域。

在布局中定位

浏览器面板可以放置在工作区的任何位置。常见布局：

• 与终端并排 —— 终端在左，浏览器在右。非常适合实时观看 AI agent 构建 UI。
• 底部面板 —— 浏览器在终端下方。为编辑器和终端提供更多垂直空间，同时保持浏览器可访问。
• 浮动面板 —— 将浏览器面板拖出，作为独立的浮层覆盖在工作区上。

通过拖动面板之间的分隔线来调整任何面板的大小。让浏览器变宽以便阅读，或变窄以快速检查响应式行为。