7 浏览器与 Computer Use：让 Codex 看到真实页面再修前端

查看大图

很多前端问题只看代码是不够的。按钮是不是溢出、深色模式是否看不清、移动端有没有横向滚动、弹窗有没有遮挡内容，都需要看真实页面。

Codex App 里的 in-app browser 和 Browser Use 就是为这种场景准备的。

我修前端时会要求 Codex 打开真实页面，而不是只看组件代码。很多问题只有在浏览器里才明显：按钮遮挡、移动端横向滚动、图片比例不对、文字被卡住。

查看大图

这里可以加入一个固定验收动作：桌面看一次，390px 移动端看一次，检查是否 404、是否断图、是否有横向滚动。这样比只说“构建通过”更接近用户体验。

in-app browser 适合什么

官方 in-app browser 文档说明，它适合本地开发服务器、文件预览和不需要登录的公开页面。你可以和 Codex 共享一个页面视图，在页面上留下评论，然后让它根据评论改代码。

查看大图

使用浏览器和 Computer Use 排查前端时，先打开真实页面，再验证可见状态、交互路径、资源加载和控制台线索。

适合：

• 本地 localhost 页面。
• 不需要登录的公开页面。
• 静态 HTML 预览。
• 移动端/桌面端布局检查。
• 对页面元素做标注反馈。

不适合：

• 依赖登录态的页面。
• 需要浏览器扩展的页面。
• 使用你日常 Chrome profile 的页面。
• 需要真实 cookies 的后台管理页面。

这些情况可以考虑普通浏览器、Chrome extension 或手工复现。

Browser Use 怎么写任务

一个好任务应该明确页面、状态和边界：

查看大图

《浏览器与 Computer Use：让 Codex 看到真实页面再修...》适合边看图边读正文。先确认问题和判断标准，再看概念解释与练习步骤，信息会更容易连成一条线。

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 修完页面后，至少检查：

查看大图

回看《浏览器与 Computer Use：让 Codex 看到真实页面再修前端》时，不必一次做大项目，先用一条简单样例确认主线是否清楚。

查看大图

如果《浏览器与 Computer Use：让 Codex 看到真实页面再修前端》还没完全消化，可以从这张卡片的四个动作重新走一遍。

• 桌面端和移动端都能看。
• 文字不溢出。
• 按钮不遮挡。
• 深浅色模式可读。
• 图片资源正常加载。
• 构建通过。

只看代码 diff 不够。能看到页面，前端问题才算闭环。

参考资料：

• Codex in-app browser
• Computer Use
• Codex app features