预览本地应用

嵌入式浏览器最常见的用途是在应用本地运行时预览它。以下是从零开始到在工作区中看到运行中的应用的步骤。

逐步设置

步骤 1：在终端中启动开发服务器。

在 1DevTool 中打开终端并启动开发服务器。命令取决于你的技术栈：

• React / Next.js / Vite: npm run dev
• Django: python manage.py runserver
• Rails: rails server
• Rust（使用 web 框架）: cargo run
• Go: go run main.go

等待服务器输出其本地 URL —— 通常是类似 http://localhost:3000、http://localhost:8000 或 http://localhost:8080 的地址。

步骤 2：打开浏览器面板。

点击面板工具栏中的 Browser 图标，或从 Add Panel 菜单中打开。浏览器面板会出现，带有空地址栏。

步骤 3：导航到你的本地 URL。

点击地址栏，输入开发服务器运行的 URL（例如 http://localhost:3000），然后按 Enter。你的应用会在面板中加载。

步骤 4：按需刷新。

按 Cmd+R（macOS）或 Ctrl+R（Windows/Linux）重新加载页面。如果你的开发服务器支持热模块替换（HMR）—— 如 Vite 或 Next.js —— 页面会在文件更改时自动更新，无需手动刷新。

步骤 5：调整大小以测试布局。

拖动面板分隔线使浏览器面板变窄或变宽。这是查看应用在不同宽度下外观的快速方法，无需设置单独的响应式测试工具。

测试响应式布局

拖动面板分隔线使浏览器变窄，检查你的移动端布局。对于更精确的响应式测试，1DevTool 包含一个 Mobile Simulator：点击浏览器面板标题栏中的手机图标，以标准移动端断点（iPhone 375px、平板 768px 等）预览应用。

Mobile Simulator 还允许你在竖屏和横屏之间切换设备方向，因此你可以在没有物理设备的情况下验证布局在两种模式下都能正常工作。

与 AI Agents 配合使用

嵌入式浏览器在与 AI agent 协作时真正发挥价值。以下是一个几乎消除所有上下文切换的工作流程：

1. 打开一个 Claude Code 终端并给它一个任务："构建一个登录页面，带有验证邮箱和密码字段的表单。"
2. 看着终端中 Claude 编写代码。
3. 当 Claude 报告完成时，在浏览器面板中按 Cmd+R 重新加载。
4. 登录页面出现在面板中。如果看起来有问题，向 Claude 描述而无需切换应用："提交按钮离密码字段太近，增加一些间距。"
5. Claude 修复。重新加载。重复。

这个循环 —— 终端中编码，浏览器中验证，描述修复 —— 比在终端窗口、代码编辑器和浏览器标签页之间切换快得多。

提示： 将浏览器面板和终端并排放置，这样你可以一目了然地观看 agent 工作并看到结果。对于支持热重载的项目，你甚至不需要按刷新。