Playground HTML, CSS, dan JavaScript

Cara menggunakan

1. Beralih antara editor HTML, CSS, dan JavaScript dengan tombol di atas, lalu tulis kode.
2. Pratinjau diperbarui otomatis setelah Anda berhenti mengetik, atau matikan opsi itu dan klik Jalankan.
3. Periksa console untuk output dan error, lalu klik Unduh HTML.

Penjelasan opsi

Sandbox

Pratinjau berjalan dalam sandbox terisolasi yang tidak dapat membaca cookie atau penyimpanan situs ini dan tidak dapat membuka dialog.

Console

Menampilkan output console.log, warn, error, serta error yang tidak tertangkap dengan nomor baris; 200 entri terbaru dipertahankan.

Unduhan

Menggabungkan tiga bagian menjadi satu file HTML, dengan style tag dan script di akhir body.

Cara halaman disusun

Ketiga editor digabungkan menjadi satu dokumen, dengan urutan ini. Tata letak yang sama Anda dapatkan saat mengeklik Unduh HTML, hanya saja skrip kecil yang mengirim keluaran konsol ke halaman di bawah pratinjau tidak disertakan dalam unduhan.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* your CSS */
</style>
</head>
<body>
<!-- your HTML -->
<script>
// your JavaScript
</script>
</body>
</html>

Karena skrip berada setelah HTML Anda, Anda bisa langsung memakai document.getElementById tanpa menunggu halaman dimuat. Di editor HTML, Anda hanya menulis yang berada di dalam body, bukan tag html, head, atau body itu sendiri. Pratinjau adalah iframe yang hanya diberi izin menjalankan skrip, itulah sebabnya dialog alert dan akses ke cookie situs ini diblokir.

Pertanyaan yang sering diajukan

Privasi

Alat ini berjalan sepenuhnya di browser Anda. File dan teks Anda diproses di perangkat Anda dan tidak pernah diunggah ke server kami.