HTML, CSS และ JS Playground

ทำอะไรได้

Playground นี้เป็นโค้ดเอดิเตอร์ออนไลน์ขนาดเล็กสำหรับการทดลองงาน front-end เขียน HTML, CSS และ JavaScript ในสามแท็บที่มีไฮไลต์ไวยากรณ์ แล้วพรีวิวจะอัปเดตขณะที่คุณพิมพ์ เหมือน CodePen หรือ JSFiddle แต่ไม่ต้องมีบัญชี คอนโซลในตัวแสดงเอาต์พุตของ console.log() และข้อผิดพลาดพร้อมหมายเลขบรรทัดใน JavaScript ของคุณ จึงดีบักได้โดยไม่ต้องเปิด developer tools สะดวกเมื่อใช้บนมือถือหรือคอมพิวเตอร์ที่ยืมมา

ใช้ทดลองเลย์เอาต์ CSS จำลองบั๊กให้เพื่อนร่วมงาน ทดสอบโค้ดจาก Stack Overflow สอนมือใหม่ หรือร่างต้นแบบเร็ว ๆ

วิธีใช้งาน

1. พิมพ์ในแท็บ HTML, CSS และ JS หรือกด ตัวอย่าง เพื่อเริ่มจากเดโมตัวนับเล็ก ๆ จุดบนแท็บหมายความว่าแท็บนั้นมีโค้ด
2. พรีวิวจะรันอัตโนมัติ 0.6 วินาทีหลังคุณหยุดพิมพ์ ปิด รันอัตโนมัติ สำหรับสคริปต์หนัก ๆ แล้วกด รัน หรือ Ctrl+Enter เมื่อพร้อม
3. ดู คอนโซล สำหรับ log คำเตือน และข้อผิดพลาด บรรทัดล่าสุดจะอยู่บนสุดเสมอ ออบเจกต์ อาร์เรย์ Map, Set และ DOM element จะแสดงในรูปแบบกระชับที่อ่านง่าย
4. กด แชร์ เพื่อส่งโค้ดให้ผู้อื่น ดาวน์โหลด ZIP จะบันทึก index.html, style.css และ script.js แยกเป็นไฟล์ พร้อมใช้ในโปรเจกต์จริง ส่วน ดาวน์โหลด HTML จะบันทึกทุกอย่างเป็นไฟล์ index.html ไฟล์เดียวที่เปิดได้ในทุกเบราว์เซอร์

โค้ดของคุณถูกเก็บไว้ในเบราว์เซอร์นี้ จึงยังอยู่เมื่อคุณกลับมา ปุ่ม Tab ย่อหน้าด้วยสองช่องว่าง

ตัวอย่าง

HTML:

<button id="go">Click me</button>

JavaScript:

document.querySelector('#go').addEventListener('click', () => {
  console.log('clicked at', new Date().toLocaleTimeString())
})

ทุกครั้งที่คลิกจะเพิ่มหนึ่งบรรทัดในคอนโซล หากสะกดชื่อผิด คอนโซลจะแสดง ReferenceError สีแดงพร้อมบรรทัดในแท็บ JS ที่เกิดข้อผิดพลาด

ทำงานอย่างไร

โค้ดทั้งสามแผงถูกรวมเป็นเอกสาร HTML เดียว และโหลดลงใน iframe ที่มี attribute sandbox โค้ดจึงอ่าน cookie หรือ storage ของเว็บไซต์นี้ไม่ได้ สคริปต์เล็ก ๆ ที่เพิ่มเข้าไปในเฟรมจะส่งต่อการเรียก console และข้อผิดพลาดที่ไม่ถูกจับไปยังหน้าเว็บ และไม่มีอะไรออกจากอุปกรณ์ของคุณ