应用内浏览器可让你和 Codex 在对话中共享已渲染的网页视图。当你在构建或调试 Web 应用,并希望预览页面和附加可视评论时,请使用此功能。
它适用于本地开发服务器、基于文件的预览,以及无需登录的公开页面。对于依赖于登录状态或浏览器扩展的内容,请使用你的常规浏览器或 Codex Chrome 扩展程序.
从工具栏、点击 URL、在浏览器中手动导航,或按下 Cmd+Shift+B (Ctrl+Shift+B 在 Windows 上)来打开应用内浏览器。
应用内浏览器不支持身份验证流程、需登录的页面、你的常规浏览器配置文件、Cookie、扩展程序或现有标签页。它适用于 Codex 无需登录即可打开的页面。
请将页面内容视为不受信任的上下文。不要在浏览器流程中粘贴密钥。
浏览器使用
浏览器使用允许 Codex 直接操作应用内浏览器。当 Codex 需要点击、输入、检查渲染状态、截屏、下载页面资源、运行只读页面检查 JavaScript 或验证页面中的修复时,请在本地开发服务器和基于文件的预览中使用它。
要使用此功能,请安装并启用浏览器插件。然后在任务中要求 Codex 使用浏览器,或直接使用以下命令引用它 @Browser。应用会将浏览行为限制在内置浏览器中,并允许你在设置中管理允许和屏蔽的网站。
Example:
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 扩展程序.
预览页面
- 在 集成终端 or with a 本地环境操作.
- 通过点击 URL 或在浏览器中手动导航,打开未经身份验证的本地路由、基于文件的页面或公开页面。
- 在代码差异旁边查看渲染状态。
- 在需要更改的元素或区域留下浏览器评论。
- 要求 Codex 处理这些评论,并保持范围最小化。
反馈示例:
I left comments on the pricing page in the in-app browser. Address the mobile
layout issues and keep the card structure unchanged.
在页面上添加评论
当缺陷仅在渲染后的页面中可见时,请使用浏览器评论向 Codex 提供针对该页面的精确反馈。
- 开启标注模式,选择某个元素或区域,然后提交评论。
- In Annotation mode, hold Shift 并点击以选择区域。
- 按住 Cmd 同时点击以立即发送评论。
留下评论后,在对话线程中发送消息,要求 Codex 进行处理。当 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。
- 指出你关注的视觉状态,例如加载中、空数据、错误或成功。
- 在需要修改的确切元素或区域上留下评论。
- 在 Codex 修改代码后,审查更新后的路由。
- 要求 Codex 在使用浏览器之前启动或检查开发服务器。
对于代码库更改,请使用 审查面板 来检查更改并留下评论。