พรีวิวแอป Local ของคุณ

ดู dev server ที่รันอยู่ใน browser panel ข้างๆ terminal ของคุณ

การใช้งานที่พบบ่อยที่สุดของ embedded browser คือการพรีวิวแอปขณะรันอยู่บน local นี่คือวิธี从无到有จนแอปที่รันอยู่มองเห็นได้ใน workspace ของคุณ

การตั้งค่าทีละขั้นตอน

ขั้นตอนที่ 1: เริ่ม dev server ใน terminal

เปิด terminal ใน 1DevTool และเริ่ม development server คำสั่งขึ้นอยู่กับ tech stack ของคุณ:

  • React / Next.js / Vite: npm run dev
  • Django: python manage.py runserver
  • Rails: rails server
  • Rust (พร้อม web framework): cargo run
  • Go: go run main.go

รอให้ server แสดง URL local — โดยทั่วไปจะเป็น http://localhost:3000, http://localhost:8000 หรือ http://localhost:8080

ขั้นตอนที่ 2: เปิด Browser panel

คลิกไอคอน Browser ใน panel toolbar หรือเปิดจากเมนู Add Panel Browser panel จะปรากฏขึ้นพร้อม address bar ว่าง

ขั้นตอนที่ 3: นำทางไปยัง URL local ของคุณ

คลิก address bar พิมพ์ URL ที่ dev server รันอยู่ (เช่น http://localhost:3000) แล้วกด Enter แอปของคุณจะโหลดใน panel

ขั้นตอนที่ 4: รีเฟรชเมื่อจำเป็น

กด Cmd+R (macOS) หรือ Ctrl+R (Windows/Linux) เพื่อโหลดหน้าใหม่ ถ้า dev server ของคุณรองรับ hot module replacement (HMR) — เช่น Vite หรือ Next.js — หน้าจะอัปเดตอัตโนมัติเมื่อไฟล์เปลี่ยนแปลง โดยไม่ต้องรีเฟรชด้วยตนเอง

ขั้นตอนที่ 5: ปรับขนาดเพื่อทดสอบ layout

ลาก divider ของ panel เพื่อให้ browser panel แคบลงหรือกว้างขึ้น เป็นวิธีด่วนเพื่อดูว่าแอปของคุณดูเป็นอย่างไรที่ความกว้างต่างๆ โดยไม่ต้องตั้งค่าเครื่องมือทดสอบ responsive แยกต่างหาก

ทดสอบ Responsive Layouts

ลาก divider ของ panel เพื่อให้ browser แคบลงและตรวจสอบ mobile layout ของคุณ สำหรับการทดสอบ responsive ที่แม่นยำยิ่งขึ้น 1DevTool มี Mobile Simulator: คลิกไอคอนโทรศัพท์ใน header ของ browser panel เพื่อพรีวิวแอปที่ mobile breakpoints มาตรฐาน (375px สำหรับ iPhone, 768px สำหรับ tablet ฯลฯ)

Mobile simulator panel

Mobile Simulator ยังให้คุณสลับ orientation ของ device ระหว่าง portrait และ landscape เพื่อให้คุณตรวจสอบว่า layout ทำงานได้ทั้งสองโหมดโดยไม่ต้องมี device จริง

ใช้ร่วมกับ AI Agents

Embedded browser โดดเด่นจริงๆ เมื่อทำงานคู่กับ AI agents นี่คือ workflow ที่กำจัด context switching เกือบทั้งหมด:

  1. เปิด Claude Code terminal และมอบหมายงาน: "สร้างหน้า login พร้อม form ที่ validate ช่อง email และ password"
  2. ดู terminal ขณะที่ Claude เขียนโค้ด
  3. เมื่อ Claude รายงานว่าเสร็จแล้ว กด Cmd+R ใน browser panel เพื่อโหลดใหม่
  4. หน้า login ปรากฏใน panel ถ้ามีบางอย่างดูผิดปกติ อธิบายให้ Claude ฟังโดยไม่ต้องสลับแอป: "ปุ่ม submit ใกล้กับช่อง password เกินไป เพิ่มระยะห่าง"
  5. Claude แก้ไข โหลดใหม่ ทำซ้ำ

ลูปนี้ — เขียนโค้ดใน terminal, ตรวจสอบใน browser, อธิบายการแก้ไข — เร็วกว่าการสลับระหว่างหน้าต่าง terminal, code editor และ browser tab มาก

Embedded browser แสดงแอป local

เคล็ดลับ: วาง browser panel และ terminal คู่กันเพื่อให้คุณดู agent ทำงานและเห็นผลลัพธ์ได้ทันที สำหรับโปรเจกต์ที่มี hot reload คุณอาจไม่ต้องกด refresh เลย