---
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。
