瀏覽器、截圖與圖片協作

返回 Codex 教學總目錄

目標與準備

本段提到的教學與資源: 第一個專案

步驟 1：選擇瀏覽器入口

Codex 桌面可用內建瀏覽器共同查看網頁，從工具列、網址連結或 @Browser 指定使用；macOS 的開啟快捷鍵是 Cmd＋Shift＋B，Windows 是 Ctrl＋Shift＋B。Linux 先依實際桌面版本的工具列與功能提供情形確認，不假定任何發行版快捷鍵都相同。內建 Browser 不提供給 CLI／IDE；這兩個入口若另有已設定的瀏覽器 MCP，應先按 MCP 教學驗證，否則自行開網頁並附截圖。

內建瀏覽器有獨立的個人資料與登入狀態，不會自動接管一般 Chrome／Edge 的分頁。要用平常瀏覽器的既有登入頁，依官方瀏覽器擴充功能的連線流程操作，不把兩個環境混在同一份驗收。網站權限允許互動，不代表頁面裡的指令可信；只處理你提出的工作，不因頁面要求就上傳其他專案檔案或更改帳號權限。

步驟 2：啟動與確認正確頁面

先在 expected 根目錄跑原三項測試，確認材料正常；再用下列平台命令啟動僅限本機的靜態伺服器，這個終端機保持開啟。若 4173 已被使用，選另一個未使用 port，同步修改後續網址，不停止其他人的服務。這是自己電腦的練習預覽，不是公開網站部署。

node --test core.test.mjs

py -m http.server 4173 --bind 127.0.0.1

python3 -m http.server 4173 --bind 127.0.0.1

打開 http://127.0.0.1:4173，確認標題、New task 表單及 Show 篩選都出現，新增 Build 與 Read the AGENTS.md rules，將 Build 設為完成。預期 1 active／2 total。不同瀏覽器設定檔可能各自有 localStorage，因此用同一個設定檔做前後比較；若已有資料，使用獨立練習設定檔或另一個 port，不清除整個日常瀏覽器的儲存內容。

若 Codex 執行在另一台遠端主機，127.0.0.1 指的是那台主機；ChatGPT 網頁的雲端工作也不能直接把自己的 localhost 當成你的電腦。先核對程式與瀏覽器所在主機，再使用環境正式提供的預覽或轉送方式。手機可透過 Remote 檢視連線電腦的工作，但本篇沒有教你把練習伺服器公開到網際網路，詳見跨裝置工作。

步驟 3：準備截圖與文字條件

在瀏覽器的響應式模式依序使用 390×900 與 1280×900 CSS 像素，固定縮放與相同兩筆資料。用 Windows 截圖工具、macOS 區域截圖，或 Linux 所提供的截圖程式只擷取頁面內容，保存 before-390.png 與 before-1280.png。截圖檔本身的像素可能受裝置縮放影響，因此把 CSS viewport、縮放比例、瀏覽器版本與日期另外寫在文字紀錄，不單靠 PNG 尺寸猜測。

# Visual check
Route: http://127.0.0.1:4173
Browser / version:
OS / date:
CSS viewport: 390 x 900, then 1280 x 900
Zoom:
State: Build complete; Read the AGENTS.md rules active
Before images:
Requested change: reduce header bottom spacing from 36px to 24px
Preserve: task data, labels, focus outline and control sizes
After images:
Behavior checks:
Unverified platforms:

截圖之前先移開帳號區、私人分頁或通知，必要時重新擷取較小範圍。不要拿另一個平台的畫面改一個圖說就宣稱已測該平台；圖片含個人資料時由你先遮蔽再提供。概念圖與生成圖片可幫助說明外觀方向，但應寫「示意圖」，不能用它代替實際操作結果。採用別人的圖片時保存來源、作者、授權與必要署名，圖說與替代文字仍用文章的當前語言。

步驟 4：用標註要求一個具體修改

先在 Codex 桌面版開啟練習專案與一個新任務；走 CLI 路線則在練習專案目錄執行 codex 並開始新的互動工作階段。桌面內建瀏覽器若有 Annotation mode，開啟後選取標題與表單之間的區域，留言說明要縮小哪一段間距，再回到主任務送出要求。若沒有標註入口，附上兩張 before 圖並指出標題下方的空白，同樣有效；註解保存不代表模型已開始修改，仍須送出任務。不要只寫「更好看」，把要改的值、保留項目及兩種寬度的驗收說清楚。

Use the attached before screenshots and the local practice page at http://127.0.0.1:4173.
In style.css, reduce the existing header bottom margin from 36px to 24px.
Keep the task data, labels, responsive form layout, 46px controls and visible focus outline unchanged.
Verify the actual page at 390x900 and 1280x900 CSS pixels with the same two tasks.
Check no horizontal page overflow, usable filtering, keyboard focus and persistence after reload.
Report the file diff and before/after evidence. If the browser is unavailable, identify that limitation instead of claiming visual verification.

header { margin-bottom: 24px; }

參考修改只把原本 36px 改為 24px，不追加一份可能被後面 CSS 蓋掉的同名規則。完成後查看 diff，確認 core.mjs 與 app.js 沒有被順便重構，也沒有把焦點外框移除。桌面開發模式或瀏覽器檢查工具可查看 header 的實際 computed margin-bottom；這種量測比只憑兩張圖的相似程度更明確。沒有工具可量測時記錄限制，仍可人工對照。

在自己的練習頁開啟瀏覽器開發者工具，選 Console，先確認目前頁面網址，再執行下面的唯讀量測。修改前 headerMarginBottom 應為 36px，修改後為 24px；兩個尺寸都要分別記錄。若 header 不存在會顯示 null，代表應先核對頁面與元素，不能當成 0px 或通過。

(() => {
  const header = document.querySelector('header');
  const page = document.documentElement;
  return {
    url: location.href,
    viewportWidth: page.clientWidth,
    headerMarginBottom: header ? getComputedStyle(header).marginBottom : null,
    horizontalOverflow: page.scrollWidth > page.clientWidth,
  };
})()

horizontalOverflow 預期為 false，但它只檢查整頁寬度，不能證明每個按鈕都可操作、文字都可讀或焦點可見。量測後仍依下一步做鍵盤、長標題與保存測試；沒有實際開啟 Console 的環境只記未量測，不把這段程式的預期值抄成觀察結果。 數值定義見 getComputedStyle 與 scrollWidth。

步驟 5：回到畫面驗收與恢復

重新整理後在同兩個 viewport 保存 after 圖，檢查間距縮小、表單可輸入、篩選 Active 只剩一筆、Tab 焦點可見，以及重新整理後原兩筆資料還在。加入一筆接近 100 字元的長標題，確認文字能換行且頁面不橫向溢出；這是邊界案例，不能只看短標題正常就通過。最後再跑 core.test.mjs，程式測試與畫面驗收分兩欄記錄。

畫面沒變先查網址、伺服器目錄與 CSS 是否真正保存，再確認快取或覆蓋規則；空白頁先看模組是否透過 HTTP 正確載入，不能拿 file:// 造成的模組限制當成程式回歸。瀏覽器不能操作時，回報已完成程式修改但未做畫面確認，不生成一張漂亮的 after 圖充當證據。要還原只將本次 margin 值改回 36px，核對 diff 後重讀頁面；按 Ctrl＋C 停止自己這個練習伺服器。

完成紀錄應能回答：哪個真實頁面、哪兩個尺寸、改哪個檔案、哪些行為已測、哪些平台未測。讀者自行截圖與文章已有參考圖分開保存，圖說標日期與來源。內建瀏覽器的開啟、標註與權限依官方文件查證；本文不宣稱已操作你的帳號或所有平台。下一步讀排程與自動化，理解背景執行需要哪些環境。

返回 Codex 教學總目錄

閱讀完整文字說明

Reference to Change to Compare

• AI 工具
• 教學
• Codex