Codex App 内置浏览器：预览页面并留下视觉反馈

适用场景

这篇手册适合做前端页面、文档站、后台界面或可视化组件的用户。内置浏览器让你和 Codex 看到同一个页面，可以直接在渲染结果上留下评论，再让 Codex 根据评论修改代码。

OpenAI 官方文档说明，in-app browser 适合本地开发服务器、文件预览，以及不需要登录的公开页面。需要登录态、浏览器扩展或已有 cookies 的场景，应使用常规浏览器或 Codex Chrome extension。

步骤 1：先启动开发服务器

在 Codex App 的内置终端中启动项目，例如：

pnpm dev

等终端输出本地地址，例如 http://localhost:3000。如果终端报错，先让 Codex 修复启动问题，再进入浏览器预览。

步骤 2：打开内置浏览器

你可以通过工具栏打开 in-app browser，也可以点击线程里的 URL。官方文档还提到快捷键：macOS 使用 Cmd + Shift + B，Windows 使用 Ctrl + Shift + B。

打开后，访问你要检查的页面，例如：

http://localhost:3000/manual

确认页面加载出来后，再开始给 Codex 反馈。

步骤 3：用评论指出具体问题

内置浏览器的重点是视觉反馈。不要只说“这里不好看”，要在具体元素上留下具体评论。

更好的评论示例：

这个按钮在移动端会换行，请在不改变卡片高度的前提下让文案保持可读。

这张图片和正文间距太紧，请保持文章阅读节奏，增加一点上边距。

截图里展示的是 Codex 根据页面评论继续处理前端问题的场景。评论越具体，Codex 越容易给出小范围修复。

步骤 4：让 Codex 按评论修复

留下评论后，在同一个线程里告诉 Codex：

我已经在内置浏览器里给页面留下评论。
请只修复这些评论指出的问题，不要重构整体布局。
完成后重新检查同一路由。

这句话的关键是限制范围：只修评论，不要顺手大改 UI。

步骤 5：复查修复后的页面

Codex 修改后，刷新内置浏览器或让 Codex 使用浏览器重新检查。对于前端任务，推荐同时确认：

• 页面是否加载成功。
• 评论指出的问题是否已修复。
• 桌面和移动端是否都没有明显破版。
• 终端是否没有新增错误。

常见错误

不要把需要登录的网站放进 in-app browser。它不使用你的常规浏览器 profile，也不适合处理登录流程。

不要在浏览器页面里粘贴密钥、账号、客户数据或其他敏感信息。

不要一次留下几十条泛泛的评论。先处理影响最大的 3 到 5 个问题，改完再继续。

小结

内置浏览器把“代码修改”和“视觉验证”连在一起。前端任务最稳的流程是：启动开发服务器、打开页面、留下具体评论、让 Codex 小范围修复、再回到同一路由复查。