Embedded Browser — ภาพรวม

พรีวิวแอปที่รันอยู่ภายใน 1DevTool — ไม่ต้องสลับไป Chrome

Embedded browser เป็น Chromium webview เต็มรูปแบบที่สร้างอยู่ใน 1DevTool เป็น dockable panel คุณสามารถรัน development server ใน terminal และดูแอปใน browser panel — ทั้งคู่มองเห็นพร้อมกันในหน้าต่างเดียว ไม่ต้อง Alt-Tab หรือ Cmd-Tab ระหว่าง terminal และ Chrome อีกต่อไป

ทำไมจึงสำคัญ

วงจรการพัฒนาปกติที่ไม่มี embedded browser เป็นแบบนี้: แก้ไขโค้ด, สลับไป terminal, รัน server, สลับไป Chrome, โหลดหน้าใหม่, พบสิ่งที่เสีย, สลับกลับไป terminal แล้วทำซ้ำ การสลับ context ทุกครั้งเสียเวลาและทำลายโฟกัส

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

Embedded Browser รองรับอะไรบ้าง

Browser panel ใช้ Chromium engine จริง ดังนั้นจึงทำงานเหมือน Chrome ทุกประการ:

  • JavaScript — รันเต็มรูปแบบ รวมถึงฟีเจอร์ ES2020+ สมัยใหม่
  • Local storage และ cookies — คงอยู่ระหว่างการโหลดหน้า ดังนั้น session login และการตั้งค่าทำงานได้
  • WebSockets — live-reload และ hot module replacement (HMR) ทำงานได้ตามคาดกับ dev server เช่น Vite และ Next.js
  • CSS และ animations — เรนเดอร์ทุกอย่างเหมือน browser จริง

นี่ไม่ใช่ preview engine แบบง่าย ถ้าแอปของคุณทำงานใน Chrome ได้ ก็ทำงานใน embedded browser panel ได้

วิธีเปิด Browser Panel

คลิกไอคอน Browser ใน panel toolbar ด้านบนของพื้นที่ panel ใดๆ Browser panel จะเปิดขึ้นและแสดง address bar ด้านบน พิมพ์ URL แล้วกด Enter เพื่อนำทาง

หรือใช้เมนู Add Panel เพื่อเพิ่ม browser ไปยังพื้นที่ใดๆ ใน workspace layout ของคุณ

Embedded browser panel

การจัดตำแหน่งใน Layout

Browser panel สามารถวางไว้ที่ใดก็ได้ใน workspace layout ทั่วไป:

  • คู่กับ terminal — terminal ด้านซ้าย, browser ด้านขวา เหมาะสำหรับดู AI agent สร้าง UI แบบ real time
  • Bottom panel — browser ด้านล่าง terminals ให้พื้นที่แนวตั้งมากขึ้นกับ editor และ terminal ในขณะที่ browser ยังเข้าถึงได้
  • Floating panel — ลาก browser panel ออกมาลอยเป็น overlay แยกต่างหากเหนือ workspace ของคุณ

ปรับขนาด panel ใดๆ ได้โดยการลาก divider ระหว่าง panel ทำให้ browser กว้างสำหรับการอ่าน หรือแคบสำหรับการตรวจสอบ responsive behavior อย่างรวดเร็ว