แก้ปัญหา: Browser

แก้ไขปัญหาร่วมกับ embedded browser panel

แอป Localhost ไม่โหลด

อาการ: คุณนำทางไปยัง http://localhost:3000 ใน browser panel แต่เห็นข้อผิดพลาดการเชื่อมต่อหรือหน้าว่าง

วิธีแก้ไข:

  • ตรวจสอบว่า dev server ของคุณรันอยู่จริง ตรวจสอบ terminal — หาข้อความ startup (เช่น ready on http://localhost:3000 จาก Next.js หรือ Local: http://localhost:5173/ จาก Vite) หาก server ไม่รัน เริ่มมันด้วยคำสั่งปกติของคุณ (npm run dev, yarn dev ฯลฯ)
  • ลองใช้ 127.0.0.1 แทน localhost บางระบบ resolve localhost ต่างจากที่คาด แทนที่ localhost ด้วย 127.0.0.1 ใน URL bar — ตัวอย่าง http://127.0.0.1:3000
  • Content-Security-Policy headers หากแอปของคุณตั้งค่า CSP headers ที่เข้มงวดที่ป้องกันการฝังใน webview browser panel จะปฏิเสธแสดงมัน ในโหมด development คุณสามารถผ่อนคลาย headers เหล่านี้ได้ ตัวอย่างใน Next.js คุณสามารถลบหรือผ่อนคลาย directive frame-ancestors ใน next.config.js ของคุณสำหรับ local dev เท่านั้น

ความสูง Browser Panel ยุบ

อาการ: browser panel หดลงเป็นแถบเล็กและคุณไม่สามารถเห็นแอปของคุณ

วิธีแก้ไข: ลาก divider ของ panel (แถบเล็กระหว่าง browser panel และ panel ด้านบนหรือด้านล่าง) เพื่อปรับขนาด browser คลิกและลากขึ้นเพื่อให้ browser มีพื้นที่แนวตั้งมากขึ้น

หากคุณต้องการให้ browser กินพื้นที่มากที่สุด ใช้ โหมด fullscreen: กด Cmd+Shift+F (หรือ Ctrl+Shift+F บน Windows/Linux) เพื่อขยาย browser panel ให้เต็มหน้าต่าง กดปุ่มลัดเดียวกันเพื่อกลับไปยัง layout ปกติ

วิดีโอหรือเสียงไม่เล่น

Embedded browser panel ไม่รองรับ media codecs ทั้งหมด รูปแบบวิดีโอหรือสตรีมเสียงบางอย่างอาจล้มเหลวในการเล่นภายใน panel

วิธีแก้ไข: คลิกขวาที่ใดก็ได้ใน browser panel และเลือก Open in External Browser สิ่งนี้เปิด URL ปัจจุบันใน browser เริ่มต้นของระบบของคุณ (Safari, Chrome, Firefox ฯลฯ) ซึ่งมีการรองรับ codec เต็มรูปแบบ ใช้สิ่งนี้สำหรับหน้าที่หนักสื่อ video players หรืออะไรที่ต้องการ browser plugins

หน้าแสดงหน้าจอว่าง/ขาว

หน้าจอขาวว่างมักหมายความว่าหน้าโหลดแต่บางอย่างผิดพลาดใน JavaScript ก่อนที่เนื้อหาใดๆ จะแสดง

วิธีแก้ไข:

  1. คลิกปุ่ม DevTools ในแถบเครื่องมือของ browser panel (ไอคอนประแจหรือ </>)
  2. เปิดแท็บ Console
  3. หาข้อความ error สีแดง

สาเหตุที่พบบ่อยที่สุดสำหรับการพัฒนา local คือ CORS error — frontend ของคุณกำลังทำ request ไปยัง local API และ API กำลังปฏิเสธมันเพราะ request มาจาก origin webview แทนที่จะเป็น localhost เพื่อแก้ไขสิ่งนี้ใน development กำหนดค่า API server ของคุณเพื่ออนุญาต origins ทั้งหมด:

  • Express / Node: เพิ่ม app.use(cors()) พร้อมแพ็คเกจ cors
  • FastAPI: เพิ่ม CORSMiddleware พร้อม allow_origins=["*"] สำหรับ dev
  • Next.js API routes: เพิ่ม Access-Control-Allow-Origin: * ไปยัง response headers ใน route handler ของคุณ

จำที่จะจำกัด origins อีกครั้งก่อน deploy ไป production