Web Playground คืออะไร?
Web Playground ให้คุณเขียน HTML, CSS และ JavaScript แล้วดู Live Preview ทันทีใน Sandboxed iframe พร้อมสลับมุมมอง Desktop/Tablet/Mobile และมีตัวสร้าง Box Shadow, Border Radius และ CSS Animation
ใช้ทำอะไรได้บ้าง
- ทดลองโค้ดเล็ก ๆ โดยไม่ต้องสร้างโปรเจกต์
- ทดสอบ Responsive
- สร้าง CSS effect แล้วคัดลอกไปใช้
เครื่องมือย่อยในหมวดนี้
วิธีใช้งาน
- พิมพ์โค้ดในแต่ละแท็บ
- เปิด Auto Run หรือกด Run (Ctrl/⌘+Enter)
- สลับขนาดหน้าจอ
- ดาวน์โหลดเป็นไฟล์ HTML
เหมาะกับงานแบบไหน
- สอน/เรียนเว็บ
- Prototype UI
- Debug CSS
ข้อจำกัดที่ควรรู้
- Preview รันใน iframe ที่ sandbox (allow-scripts เท่านั้น) จึงเข้าถึง DOM, Cookies หรือ LocalStorage ของเว็บหลักไม่ได้
- โค้ดที่คุณเขียนเองอาจเรียกเครือข่ายภายนอกได้ (เช่น fetch หรือ <img src>) ซึ่งเป็นการกระทำของโค้ดนั้น ไม่ใช่ของเว็บไซต์
- โค้ดไม่ถูกบันทึก — ดาวน์โหลดเก็บไว้หากต้องการ
คำถามที่พบบ่อย (FAQ)
รันโค้ดอันตรายได้ไหม?
iframe ถูกแยก origin และไม่มีสิทธิ์ same-origin แต่โค้ดยังทำงานใน Browser ของคุณ อย่ารันโค้ดที่ไม่ไว้ใจ
บันทึกงานไว้ไหม?
ไม่บันทึก เพื่อความเป็นส่วนตัว ใช้ปุ่มดาวน์โหลด HTML เพื่อเก็บงาน