Skip to main content

In-App Browser

ดูตัวอย่างและ comment บนเว็บแอปจาก Codex

ภาพรวม​

In-app browser มอบมุมมองร่วมของหน้าเว็บที่ render แล้วระหว่างคุณและ Codex ภายใน thread ใช้เมื่อกำลัง build หรือ debug web app และต้องการดูตัวอย่างหน้าและแนบ visual comments

เหมาะสำหรับ local development servers, file-backed previews และ public pages ที่ไม่ต้องเข้าสู่ระบบ สำหรับสิ่งที่ขึ้นอยู่กับ login state หรือ browser extensions ให้ใช้ browser ปกติหรือ Codex Chrome extension แทน

เปิด in-app browser จาก toolbar, คลิก URL, นำทางด้วยตนเอง หรือกด Cmd+Shift+B (Ctrl+Shift+B บน Windows)

ข้อจำกัด​

In-app browser ไม่รองรับ authentication flows, signed-in pages, browser profile ปกติ, cookies, extensions หรือ existing tabs ใช้สำหรับหน้าที่ Codex เปิดได้โดยไม่ต้อง login

ให้ถือว่า page content เป็น untrusted context อย่า paste secrets ลงใน browser flows

Browser Use​

Browser use ให้ Codex ควบคุม in-app browser โดยตรง ใช้สำหรับ local development servers และ file-backed previews เมื่อ Codex ต้องคลิก พิมพ์ ตรวจสอบ rendered state ถ่าย screenshots ดาวน์โหลด page assets รัน read-only page inspection JavaScript หรือยืนยัน fix ในหน้า

ในการใช้งาน ติดตั้งและเปิดใช้ Browser plugin จากนั้นขอให้ Codex ใช้ browser ในงานของคุณ หรืออ้างอิงโดยตรงด้วย @Browser แอปเก็บ browser use ไว้ใน in-app browser และให้คุณจัดการ allowed/blocked websites จาก settings

ตัวอย่าง: "Use the browser to open http://localhost:3000/settings, reproduce the layout bug, and fix only the overflowing controls."

Codex จะถามก่อนใช้ website เว้นแต่คุณ allow ไว้แล้ว การลบ site ออกจาก allowed list จะทำให้ Codex ถามอีกครั้ง การลบออกจาก blocked list หมายความว่า Codex สามารถถามแทนที่จะ block

สำหรับ signed-in websites ใน Chrome ดู Codex Chrome extension

ดูตัวอย่างหน้า​

  1. เริ่ม development server ของแอปใน integrated terminal หรือด้วย local environment action
  2. เปิด unauthenticated local route, file-backed page หรือ public page โดยคลิก URL หรือนำทางด้วยตนเอง
  3. ตรวจสอบ rendered state ควบคู่กับ code diff
  4. ทิ้ง browser comments บน elements หรือพื้นที่ที่ต้องเปลี่ยน
  5. ขอให้ Codex แก้ไข comments และรักษา scope ให้แคบ

ตัวอย่าง feedback: "I left comments on the pricing page in the in-app browser. Address the mobile layout issues and keep the card structure unchanged."

Comment บนหน้า​

เมื่อ bug มองเห็นได้เฉพาะในหน้าที่ render แล้ว ให้ใช้ browser comments เพื่อให้ Codex ได้รับ feedback ที่แม่นยำ

  • เปิด Annotation mode เลือก element หรือพื้นที่ และ submit comment
  • ใน Annotation mode กด Shift ค้างแล้วคลิกเพื่อเลือกพื้นที่
  • กด Cmd ค้างขณะคลิกเพื่อส่ง comment ทันที

หลังทิ้ง comments ให้ส่งข้อความใน thread ขอให้ Codex แก้ไข Comments มีประโยชน์มากที่สุดเมื่อ Codex ต้องการเปลี่ยนแปลง visual แบบแม่นยำ

Feedback ที่ดีควรเฉพาะเจาะจง:

"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."

Styling Feedback​

เมื่อเพิ่ม annotation บนส่วนในหน้า กดไอคอน config ถัดจาก text input เพื่อให้ Codex ได้รับ style feedback ที่ละเอียดยิ่งขึ้น สามารถเปลี่ยนค่าเช่น font, text, spacing และ color ดูตัวอย่างผลลัพธ์โดยตรงบนหน้า แล้วส่ง annotation เพื่อให้ Codex มี target ที่ชัดเจนสำหรับการเปลี่ยนแปลง

รักษา Browser Tasks ให้กะทัดรัด​

In-app browser ใช้สำหรับการตรวจสอบและ iteration รักษาแต่ละ browser task ให้เล็กพอที่จะตรวจสอบได้ในการผ่านเดียว

  • ระบุชื่อ page, route หรือ local URL
  • ระบุ visual state ที่สนใจ เช่น loading, empty, error หรือ success
  • ทิ้ง comments บน elements หรือพื้นที่ที่ต้องเปลี่ยน
  • ตรวจสอบ route ที่อัปเดตหลังจาก Codex เปลี่ยน code
  • ขอให้ Codex เริ่มหรือตรวจ dev server ก่อนใช้ browser

สำหรับการเปลี่ยน repository ให้ใช้ review pane เพื่อตรวจสอบการเปลี่ยนแปลงและทิ้ง comments

Developer Mode​

Developer mode ทำงานกับ Browser use ใน Chrome และ Codex in-app browser ให้ Codex มีการเข้าถึง Chrome DevTools Protocol (CDP) แบบควบคุม ใช้เมื่อต้องการให้ Codex profile JavaScript ตรวจสอบ console output และ network traffic ตรวจสอบ page state เช่น DOM และ applied styles หรือ diagnose ปัญหาโดยตรงใน live browser

เปิดใช้งานได้ใน Settings > Browser และภายใต้ Developer mode เปิด "Enable full CDP access" หากองค์กรปิดใช้งานการตั้งค่านี้ คุณไม่สามารถเปิดใช้งานได้ในระดับ local Admin สามารถตั้ง browser_use_full_cdp_access = false ภายใต้ [features] ใน requirements.toml

การเข้าถึง CDP แบบ full ให้ Codex ตรวจสอบและควบคุม browser internals ที่ละเอียดอ่อนซึ่งอาจทำให้ข้อมูลเสี่ยงอันตราย Codex จะขอ explicit approval ก่อนใช้ full CDP เพื่อตรวจสอบ website ตรวจสอบ site, งาน และ access ที่ขอก่อน approve

ใช้ @Browser สำหรับ in-app browser ในการใช้ Developer mode ใน Chrome ให้ตั้งค่า Codex Chrome extension และ invoke @Chrome

ตัวอย่าง: "This app is slow. Use @Browser to capture a performance trace and inspect network traffic, then identify the bottleneck."