---
title: "用内置浏览器验收页面"
description: "说明 in-app browser 如何让 Codex 共享网页视图、预览页面，并在同一 thread 中接收视觉反馈。"
verifiedAt: "2026-05-05"
---

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](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](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

使用方式：

1. 安装并启用 Browser plugin。
2. 在 task 中要求 Codex 使用 browser，或直接引用 `@Browser`。
3. 在 settings 中管理 allowed websites 和 blocked websites。

App 会把 browser use 限制在 in-app browser 内。

示例：

```text
请使用 browser 打开 http://localhost:3000/settings，复现 layout bug，并且只修复 overflowing controls。
```

Codex 使用某个 website 前会先询问你，除非你已经 allow 这个 website。把网站从 allowed list 中移除后，Codex 下次会重新询问。把网站从 blocked list 中移除后，Codex 也可以重新询问，而不是继续视为 blocked。

## 预览页面

基本流程：

1. 在 [integrated terminal](https://developers.openai.com/codex/app/features#integrated-terminal) 中启动 app development server，或用 [local environment action](https://developers.openai.com/codex/app/local-environments#actions) 启动。
2. 点击 URL 或在 browser 中手动导航，打开 unauthenticated local route、file-backed page 或 public page。
3. 在 code diff 旁边 review rendered state。
4. 在需要修改的 elements 或 areas 上留下 browser comments。
5. 要求 Codex 处理这些 comments，并保持 scope 狭窄。

示例反馈：

```text
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 的任务。

好的反馈应该具体。

```text
This button overflows on mobile. Keep the label on one line if it fits,
otherwise wrap it without changing the card height.
```

```text
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](https://developers.openai.com/codex/app/review)，在那里检查 changes 并留下 comments。
