Playground HTML, CSS & JS

Fungsinya

Playground ini adalah editor kode online kecil untuk eksperimen front-end. Tulis HTML, CSS, dan JavaScript di tiga tab dengan penyorotan sintaks dan pratinjau diperbarui saat Anda mengetik, seperti CodePen atau JSFiddle tetapi tanpa akun. Console bawaan menampilkan output console.log() dan error beserta nomor barisnya di JavaScript Anda, sehingga Anda bisa debug tanpa membuka developer tools. Ini berguna di ponsel atau komputer pinjaman.

Gunakan untuk mencoba layout CSS, mereproduksi bug untuk rekan kerja, menguji potongan kode dari Stack Overflow, mengajari pemula, atau membuat prototipe cepat.

Cara menggunakan

1. Ketik di tab HTML, CSS, dan JS, atau tekan Contoh untuk memulai dari demo penghitung kecil. Titik pada tab berarti tab itu berisi kode.
2. Pratinjau berjalan otomatis 0,6 detik setelah Anda berhenti mengetik. Matikan Jalankan otomatis untuk script yang berat, lalu tekan Jalankan atau Ctrl+Enter saat Anda siap.
3. Pantau Console untuk log, peringatan, dan error; baris terbaru selalu ada di paling atas. Objek, array, Map, Set, dan elemen DOM ditampilkan dalam bentuk ringkas yang mudah dibaca.
4. Bagikan untuk mengirim kode ke seseorang. Unduh ZIP menyimpan index.html, style.css, dan script.js sebagai file terpisah yang siap dipakai di proyek sungguhan; Unduh HTML menyimpan semuanya sebagai satu file index.html yang bisa dibuka di browser apa pun.

Kode Anda disimpan di browser ini, sehingga masih ada saat Anda kembali. Tombol Tab membuat indentasi dua spasi.

Contoh

HTML:

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

JavaScript:

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

Setiap klik menambahkan satu baris ke console. Jika Anda salah mengeja sebuah nama, console menampilkan ReferenceError berwarna merah beserta baris di tab JS tempat error itu terjadi.

Cara kerjanya

Ketiga panel digabung menjadi satu dokumen HTML dan dimuat ke iframe dengan atribut sandbox, sehingga kode tidak bisa membaca cookie atau penyimpanan situs ini. Script kecil yang ditambahkan ke frame meneruskan panggilan console dan error yang tidak tertangkap ke halaman, dan tidak ada yang keluar dari perangkat Anda.