7 浏览器与 Computer Use：让 Codex 看到真实页面再修前端
很多前端问题只看代码是不够的。按钮是不是溢出、深色模式是否看不清、移动端有没有横向滚动、弹窗有没有遮挡内容，都需要看真实页面。
Codex App 里的 in-app browser 和 Browser Use 就是为这种场景准备的。
in-app browser 适合什么
官方 in-app browser 文档说明，它适合本地开发服务器、文件预览和不需要登录的公开页面。你可以和 Codex 共享一个页面视图，在页面上留下评论，然后让它根据评论改代码。
适合：
- 本地
localhost页面。 - 不需要登录的公开页面。
- 静态 HTML 预览。
- 移动端/桌面端布局检查。
- 对页面元素做标注反馈。
不适合：
- 依赖登录态的页面。
- 需要浏览器扩展的页面。
- 使用你日常 Chrome profile 的页面。
- 需要真实 cookies 的后台管理页面。
这些情况可以考虑普通浏览器、Chrome extension 或手工复现。
Browser Use 怎么写任务
一个好任务应该明确页面、状态和边界：
Use the browser to open http://localhost:3000/settings.
Reproduce the mobile layout overflow.
Fix only the overflowing controls.
Do not change API logic or data fetching.
After the fix, verify the page again in the browser.
中文也可以：
请用浏览器打开 http://localhost:3000。
检查首页 375px 宽度下是否有文字溢出。
只修视觉布局，不改接口和数据结构。
改完后重新打开页面验证。
重点是“只修视觉布局”。前端 bug 很容易被扩大成一堆无关重构。
页面评论比口头描述更准
官方文档里提到，你可以在 in-app browser 里进入 Annotation mode，对具体元素或区域留言。比如按钮溢出、tooltip 遮挡、卡片高度跳动。Codex 能把这些评论当成上下文。
这比你说“右侧那里不太好看”要准确得多。页面上标出来，Codex 更容易改对。
Computer Use 什么时候用
Computer Use 是更宽的桌面操作能力，适合控制本机应用或操作系统 UI。它比 in-app browser 权限更敏感。官方文档也提醒，在 Windows 上目标应用需要保持在当前桌面可见。
我建议把它放在后面学。先把 in-app browser 用熟，再用 Computer Use 处理那些必须操作桌面应用的任务。
前端验证清单
让 Codex 修完页面后，至少检查：
- 桌面端和移动端都能看。
- 文字不溢出。
- 按钮不遮挡。
- 深浅色模式可读。
- 图片资源正常加载。
- 构建通过。
只看代码 diff 不够。能看到页面，前端问题才算闭环。
参考资料：
Continue