สนามทดลองโค้ด
สนามทดลอง HTML CSS และ JavaScript ออนไลน์ พร้อมพรีวิวสด เอดิเตอร์แสดงเลขบรรทัด และคอนโซลที่จับผลลัพธ์ ทดสอบโค้ดได้ทันที ดาวน์โหลดผลเป็นไฟล์ HTML เดียว ทำงานทั้งหมดในเบราว์เซอร์
สนามทดลองโค้ดคืออะไร?
สนามทดลองโค้ดคือ sandbox ที่คุณเขียน HTML CSS JavaScript แล้วเห็นผลลัพธ์ที่เรนเดอร์ได้ทันที เครื่องมือนี้ยังมีคอนโซลที่จับผลลัพธ์ เอดิเตอร์แสดงเลขบรรทัด และดาวน์โหลดผลงานเป็นไฟล์ HTML เดียวได้
พรีวิวสดทำงานอย่างไร?
โค้ดสามส่วนถูกรวมเป็นเอกสาร HTML สมบูรณ์แล้วเรนเดอร์ใน iframe แบบ sandbox เมื่อเปิดรันอัตโนมัติ พรีวิวจะรีเฟรชประมาณครึ่งวินาทีหลังหยุดพิมพ์ หรือกดปุ่มรันเอง
แผงคอนโซลแสดงอะไร?
ทุกอย่างที่หน้าเว็บเขียนด้วย console.log info warn error รวมถึง error ตอนรันและ promise rejection ที่ไม่ได้จัดการ พร้อมเลขบรรทัด และจะถูกล้างทุกครั้งที่รัน
รีเฟรชหน้าแล้วโค้ดยังอยู่ไหม?
อยู่ครับ ฉบับร่างของทั้งสามส่วนถูกเก็บในเบราว์เซอร์และกู้คืนเมื่อเข้าใหม่ ปุ่มรีเซ็ตจะคืนโค้ดตัวอย่างเดิม และการล้างข้อมูลเว็บไซต์จะลบฉบับร่างด้วย
พรีวิวถูก sandbox และปลอดภัยไหม?
พรีวิวรันใน iframe แบบ sandbox ที่ไม่มีสิทธิ์ same-origin สคริปต์ที่ทดสอบจึงอ่านหน้านี้หรือคุกกี้ไม่ได้ แต่ก็ควรทดสอบเฉพาะโค้ดที่เชื่อถือ เพราะมันยังรันในเบราว์เซอร์ของคุณ
ดาวน์โหลดผลการทดลองได้ไหม?
ได้ ปุ่มดาวน์โหลด .html จะรวม HTML CSS JavaScript ปัจจุบันเป็นไฟล์เดียวสมบูรณ์ในตัว เปิดในเบราว์เซอร์ใดก็ได้หรือแชร์ให้คนอื่น
รันอะไรในส่วน JavaScript ได้บ้าง?
JavaScript มาตรฐานของเบราว์เซอร์: จัดการ DOM, event, canvas, fetch ไปยัง public API (ตามกฎ CORS ของแต่ละที่) และไลบรารีที่วางแบบ inline ไม่รองรับการ resolve module หรือแพ็กเกจ npm
สนามทดลองต้องใช้อินเทอร์เน็ตไหม?
ใช้เฉพาะตอนโหลดหน้าเว็บเอง หลังจากนั้นการแก้ไข พรีวิว และการจับคอนโซลทำงานในเครื่องทั้งหมด และโค้ดที่พิมพ์ไม่เคยถูกส่งไปที่ใด
วิธีใช้ สนามทดลองโค้ด
สนามทดลองนี้รวม HTML, CSS และ JavaScript ของคุณเข้าเป็นพรีวิวสดแบบแซนด์บ็อกซ์ทั้งหมดในเบราว์เซอร์ พร้อมแผงคอนโซลที่จับล็อกและข้อผิดพลาด ฉบับร่างจะถูกบันทึกไว้ในเครื่องเพื่อให้คุณทำต่อจากเดิมได้
- แก้ไขแผง HTML, CSS และ JavaScript — แต่ละตัวแก้ไขมีเลขบรรทัดและไฮไลต์ไวยากรณ์
- เมื่อเปิดรันอัตโนมัติไว้ พรีวิวจะรีเฟรชเองระหว่างพิมพ์ หรือกดปุ่มรันเพื่อสั่งเอง (ปิดรันอัตโนมัติแล้วรันมือก็ได้)
- จับตาแผงคอนโซลใต้พรีวิว: ผลลัพธ์จาก console.log คำเตือน ข้อผิดพลาด และข้อยกเว้นที่ไม่ถูกจับ จะแสดงที่นี่พร้อมเลขบรรทัด
- กดรีเซ็ตเพื่อกลับไปที่ตัวอย่างในตัว หรือกดดาวน์โหลด .html เพื่อบันทึกทุกอย่างเป็นไฟล์เดียวสมบูรณ์ในตัว
- ใช้เปิดหน้าต่างใหม่เพื่อดูเอกสารปัจจุบันแบบเต็มขนาดในแท็บของตัวเอง
คอนโซลจะถูกล้างทุกครั้งที่รัน จึงเพิ่ม console.log ได้สบายๆ ระหว่างดีบัก — ผลลัพธ์แสดงทันทีโดยไม่ต้องเปิดคอนโซลจริงของเบราว์เซอร์
เครื่องมือที่เกี่ยวข้อง
- ตัวจัดรูปแบบ JavaScript ตัวจัดรูปแบบและจัดระเบียบโค้ด JavaScript ออนไลน์ฟรี แปลง JS ที่บีบอัดเป็นโค้ดที่สะอาด อ่านง่าย และเยื้องอย่างถูกต้องทันที พร้อมตัวเลือกที่ปรับแต่งได้
- ตัวบีบอัด JS บีบอัดโค้ด JavaScript ทันที ลบช่องว่าง ความคิดเห็น และเพิ่มประสิทธิภาพ JS เพื่อการโหลดที่เร็วขึ้น
- ทดสอบ Regex ทดสอบและดีบักนิพจน์ปกติด้วยการจับคู่แบบเรียลไทม์และการจับกลุ่ม
- ดูตัวอย่าง Markdown ตัวแก้ไข Markdown ออนไลน์ฟรีพร้อมตัวอย่างสด เขียน เรนเดอร์ และส่งออก Markdown พร้อมรองรับ GFM เต็มรูปแบบ
- ตรวจสอบแฮช คำนวณและตรวจสอบแฮช MD5, SHA-1, SHA-256, SHA-512 ในเครื่อง
- เครื่องคำนวณ Chmod เครื่องคำนวณ chmod ออนไลน์ฟรีเพื่อแสดงและคำนวณสิทธิ์ไฟล์ Linux ด้วยช่องทำเครื่องหมาย แปลงระหว่างสัญกรณ์ตัวเลข (755, 644) และสัญลักษณ์ (rwxr-xr-x) ทันที รองรับสิทธิ์พิเศษเช่น setuid, setgid, sticky bit
- ตาราง ASCII ข้อมูลอ้างอิงการเข้ารหัสอักขระ ASCII ครบถ้วนพร้อมรหัสทศนิยม เลขฐานสิบหก ฐานแปด ฐานสอง เอนทิตี HTML และคำอธิบายอักขระ ค้นหาและกรองได้ทันที
- ตัวแสดง Hex ดูเนื้อหาไฟล์ในรูปแบบ hex dump พร้อมการค้นหา การนำทางออฟเซ็ต และการเลื่อนเสมือน