用內建瀏覽器驗收頁面

📖 本篇術語速查表

英文 / 縮寫	中文	一句話解釋
內建瀏覽器	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 和測試驗收，別開瀏覽器。