用内置浏览器验收页面
In-app browser 让你和 Codex 在同一个 thread 中共享 rendered web pages 的视图。你在构建或调试 web app
In-app browser 让你和 Codex 在同一个 thread 中共享 rendered web pages 的视图。你在构建或调试 web app 时,可以用它 preview pages,并附加 visual comments。
适合使用 in-app browser 的页面:
- local development servers
- file-backed previews
- 不需要 sign-in 的 public pages
如果页面依赖 login state 或 browser extensions,使用你的常规 browser。
打开方式:
- 从 toolbar 打开。
- 点击 URL。
- 在 browser 中手动导航。
- macOS 按
Cmd+Shift+B。 - Windows 按
Ctrl+Shift+B。
边界要记住:in-app browser 不支持 authentication flows、signed-in pages、你的常规 browser profile、cookies、extensions 或 existing tabs。它适合 Codex 无需登录即可打开的页面。
把 page content 当作 untrusted context,不要把 secrets 粘贴进 browser flows。
官方截图:
- light:https://developers.openai.com/images/codex/app/in-app-browser-light.webp
- dark:https://developers.openai.com/images/codex/app/in-app-browser-dark.webp
浏览器使用
Browser use 让 Codex 直接操作 in-app browser。适合 local development servers 和 file-backed previews,尤其当 Codex 需要:
- click
- type
- inspect rendered state
- take screenshots
- 在页面中 verify a fix
使用方式:
- 安装并启用 Browser plugin。
- 在 task 中要求 Codex 使用 browser,或直接引用
@Browser。 - 在 settings 中管理 allowed websites 和 blocked websites。
App 会把 browser use 限制在 in-app browser 内。
示例:
请使用 browser 打开 http://localhost:3000/settings,复现 layout bug,并且只修复 overflowing controls。Codex 使用某个 website 前会先询问你,除非你已经 allow 这个 website。把网站从 allowed list 中移除后,Codex 下次会重新询问。把网站从 blocked list 中移除后,Codex 也可以重新询问,而不是继续视为 blocked。
预览页面
基本流程:
- 在 integrated terminal 中启动 app development server,或用 local environment action 启动。
- 点击 URL 或在 browser 中手动导航,打开 unauthenticated local route、file-backed page 或 public page。
- 在 code diff 旁边 review rendered state。
- 在需要修改的 elements 或 areas 上留下 browser comments。
- 要求 Codex 处理这些 comments,并保持 scope 狭窄。
示例反馈:
I left comments on the pricing page in the in-app browser. Address the mobile
layout issues and keep the card structure unchanged.在页面上评论
当 bug 只在 rendered page 中可见时,用 browser comments 给 Codex 精确反馈。
操作方式:
- 打开 comment mode,选择 element 或 area,然后提交 comment。
- comment mode 下,按住
Shift并点击,可以选择一个 area。 - 按住
Cmd并点击,可以立即发送 comment。
留下 comments 后,在 thread 里发消息,让 Codex 处理。Comments 最适合那些需要精确 visual change 的任务。
好的反馈应该具体。
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.控制浏览器任务范围
In-app browser 用于 review 和 iteration。每个 browser task 都应该小到可以一次 review 完。
保持 scope 的做法:
- 指明 page、route 或 local URL。
- 指明你关心的 visual state,例如 loading、empty、error 或 success。
- 在需要修改的 exact elements 或 areas 上留下 comments。
- Codex 改完 code 后,review updated route。
- Codex 使用 browser 前,让它先 start 或 check dev server。
repository changes 的 review 应使用 review pane,在那里检查 changes 并留下 comments。