内置浏览器让你和 Codex 可以在线程内看到同一个渲染后的网页。构建或调试 Web 应用时,如果你希望预览页面并附上可视化标注,可以使用它。
它适合本地开发服务器、基于文件的预览,以及不需要登录的公开页面。对于依赖登录态或浏览器扩展的内容,请使用你的常规浏览器,或使用 Codex Chrome 扩展。
你可以通过工具栏、点击 URL、在浏览器中手动导航,或按 Cmd+Shift+B(Windows 上为 Ctrl+Shift+B)打开内置浏览器。
请把页面内容视为不可信上下文。不要把密钥粘贴到浏览器流程中。
浏览器操作
浏览器操作允许 Codex 直接控制内置浏览器。若 Codex 需要点击、输入、检查渲染状态、截图、下载页面资源、运行只读页面检查 JavaScript,或在页面里验证修复结果,可把它用于本地开发服务器和基于文件的预览。
要使用它,请先安装并启用 Browser 插件。然后在任务里直接要求 Codex 使用浏览器,或用 @Browser 明确引用它。应用会把浏览器操作限制在内置浏览器里,并允许你在设置中管理允许和阻止的网站。
示例:下面这条提示词会要求 Codex 打开本地设置页,复现布局问题,并只修复溢出的控件。
Use the browser to open http://localhost:3000/settings, reproduce the layout
bug, and fix only the overflowing controls.除非你已经把某个站点加入允许列表,否则 Codex 在使用该站点前会先询问。把站点从允许列表中移除后,Codex 下次会重新询问;把站点从阻止列表中移除后,Codex 会恢复为可询问状态,而不是继续视为永久阻止。
如果需要在 Chrome 中处理已登录网站,请参见 Codex Chrome 扩展。
预览页面
- 在集成终端中启动应用的开发服务器,或通过本地环境动作启动。
- 点击 URL 或在浏览器中手动导航,打开一个无需认证的本地路由、基于文件的页面或公开页面。
- 对照代码 diff 审查渲染后的状态。
- 在需要改动的元素或区域上留下浏览器标注。
- 要求 Codex 处理这些标注,并保持范围收敛。
示例反馈:下面这条消息适合在你已经留下浏览器标注后发送,让 Codex 聚焦处理移动端布局问题。
I left annotations on the pricing page in the in-app browser. Address the mobile
layout issues and keep the card structure unchanged.标注页面
当 bug 只在渲染页面中可见时,可以用浏览器标注把页面上的具体反馈交给 Codex。
- 打开 Annotation mode(标注模式),选择一个元素或区域,然后提交标注。
- 在 Annotation mode 中,按住 Shift 并点击可以选择一个区域。
- 点击时按住 Cmd 可以立即发送标注。
留下标注后,请在线程中再发送一条消息,要求 Codex 处理这些标注。当 Codex 需要做精确的视觉改动时,标注最有用。
好的反馈应足够具体。下面两个英文示例分别说明按钮换行和 tooltip 位置问题,保留原文便于直接复制到 Codex 线程里。
This button overflows on mobile. Keep the label on one line if it fits,
otherwise wrap it without changing the card height.This tooltip covers the data point under the cursor. Reposition the tooltip so
it stays inside the chart bounds.样式反馈
当你给页面中的某个区域添加标注时,可以点击文本输入框旁边的配置图标,给 Codex 更细粒度的样式反馈。你可以调整字体、文本、间距、颜色等值,直接在页面上预览结果,然后再发送标注,让 Codex 拿到更明确的改动目标。
保持浏览器任务范围收敛
内置浏览器用于审查和迭代。每个浏览器任务都应小到可以一次审完。
- 说明页面、路由或本地 URL。
- 说明你关心的视觉状态,例如 loading、empty、error 或 success。
- 在确切需要改动的元素或区域上留下标注。
- Codex 修改代码后,再审查更新后的路由。
- 在 Codex 使用浏览器之前,要求它启动或检查开发服务器。
对于仓库改动,请使用评审面板检查改动并留下评论。