浏览器预览
在 Dream 中预览本地应用程序、管理浏览器选项卡，并检查页面。
Dream 的浏览器会在你的项目旁边打开网页并进行聊天。你可以使用它来检查本地应用程序，同时让代理在代码上工作。
预览你的应用程序#
- 使用其正常的项目命令在 终端 中启动应用程序。
- 复制应用程序打印的本地 URL，包括其端口。
- 在右侧面板单击 浏览器。
- 在地址栏中输入 URL 并按 Enter。
该页面在工作区中打开。如果应用程序在下次运行时使用了不同的端口，请相应更新地址。Dream 的浏览器会打开该 URL；它不会启动应用程序。
使用浏览器选项卡#
点击 新建标签页 可打开另一个页面并选择标签页以切换到它。这有助于在浏览历史中同时保留两个路由而不会互相替换。
使用 后退、前进 和 刷新浏览器 来导航。使用其关闭控件关闭单个标签页。隐藏浏览器面板可让你之后返回到已打开的标签页。
检查并分享你所看到的内容#
浏览器操作包括：
| 操作 | 用于…… |
|---|---|
| 打开 DevTools | 检查页面的控制台、元素和网络活动 |
| 截图 | 捕获页面以用于错误报告或进一步讨论 |
| 放大 / 缩小 / 重置缩放 | 调整预览界面的显示缩放比例 |
| 在系统浏览器中打开 | 在您的常规浏览器中查看当前 URL |
在需要更多空间时使用 展开浏览器，在想要返回较小视图时使用 折叠浏览器。要给代理一张整个页面的截图，可使用聊天框中的 附件控制。
将元素发送到聊天中#
- 在浏览器工具栏点击 选择元素并发送到聊天。
- 悬停页面以突出显示元素，然后点击您想要讨论的项目。按 Escape 取消操作。
- 在发送到聊天表单中输入评论，如果想要进行单独的对话，请启用新聊天，然后发送它。
Dream 会将你的评论附带元素的选择器、大小、文本、样式、HTML 以及该元素的截图一起发送，以便代理能够在代码中定位到该元素。详情和限制请参见 向聊天发送反馈。
要求代理使用浏览器#
Claude Code、Codex、OpenCode 和 Grok 的聊天会自动接收 Dream 浏览器中的工具，它们与你看到的相同项目浏览器标签页一起工作。Cursor 聊天不会收到这些工具。
给代理页面 URL 和一个具体任务，例如：
在 Dream 的浏览器中打开 http://localhost:3000/settings。更改主题，刷新页面，然后检查所选主题是否保留。如果没有保留，请检查控制台和网络请求。
这些工具可以打开和导航标签页，检查页面内容，点击、输入文本、悬停、选择选项、滚动、截取屏幕截图，以及检查控制台日志和网络响应。它们还可以从项目中附加文件以上传控件。文件上传必须使用项目内的路径。
在请求代理检查其本地 URL 之前，请先启动应用程序。浏览器操作遵循聊天的权限；如果请求批准，请在聊天中作出回应。这些工具是内置的，不需要手动定义MCP 服务器。
重新加载并清除站点数据#
更改应用程序代码后尝试正常刷新。如果页面仍然显得过时，请使用浏览器操作中的强制重新加载。
清除缓存 会移除浏览器缓存数据。清除 Cookie 会清除 Cookie，并可能使你在嵌入式浏览器中退出网站登录。在调查缓存或认证行为时，请谨慎使用这些操作。
如果本地页面无法加载#
检查应用程序是否仍在运行，确认其终端输出中的完整 URL 和端口，并检查其中是否存在服务器错误。在你的系统浏览器中尝试相同的地址，以判断问题是由应用程序本身还是嵌入式预览引起的。