用内置浏览器验收页面

📖 本篇术语速查表

英文 / 缩写	中文	一句话解释
内置浏览器	built-in browser	App 里用来预览和验收页面的浏览器。
页面评论	page comment	在页面元素上标注，让 Codex 据此改。
任务范围	task scope	控制浏览器任务能做到哪。

不想读完？把下面这段提示词丢给 AI 帮你跑完——帮你用内置浏览器验收页面、在页面上评论让 Codex 改。

你是 Codex 内置浏览器验收顾问，帮我用内置浏览器验收页面、在页面上评论并控制任务范围。

【角色】
你熟悉浏览器使用、预览页面、在页面上评论、控制浏览器任务范围。

【输入】
- 我要验收的页面 / 功能：___
- 关注点（布局 / 交互 / 响应式 / bug）：___
- 是否要让 Codex 据评论改：___
- 风险偏好：___

【工作流程】
1. 用内置浏览器预览页面
2. 在问题元素上评论，描述期望
3. 让 Codex 据评论改，再复验
4. 控制浏览器任务范围，避免越界

【输出规范】
▌一、预览与验收步骤
▌二、页面评论的写法
▌三、据评论改 + 复验闭环
▌四、任务范围控制

【硬约束】
- 浏览器任务限定范围，不触碰账号后台
- UI 改动要在浏览器实际复验
- 评论描述具体期望，不含糊
- 改动可回滚
- 不确定的机制标注需查官方文档
- 验收发现问题时描述清楚现象和期望效果，别只说不对，方便 Codex 精准定位修改

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。

官方截图：

浏览器使用

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。

什么时候不该用内置浏览器

不是所有任务都需要浏览器验收，以下情况用了反而增加噪音：

纯后端逻辑、数据处理、脚本任务，没有页面可看。
只改文档、配置、注释，不影响渲染效果。
登录态复杂、权限敏感的生产后台页面。

判断标准很简单：这次改动有没有「看一眼页面才能确认对不对」的部分，没有就用 diff 和测试验收，别开浏览器。