Langkau ke kandungan
ToolMug

Gunakan ↑ ↓ untuk bergerak, Enter untuk membuka, Esc untuk menutup.

Taman Uji HTML, CSS dan JavaScript

Tulis HTML, CSS dan JavaScript di sebelah kiri dan lihat hasil dikemas kini di sebelah kanan, dengan konsol di bawah yang menunjukkan output console.log serta ralat skrip. Sesuai untuk belajar atau mencuba gaya dan interaksi, dan semuanya boleh dimuat turun sebagai satu fail HTML.

Berjalan dalam pelayar anda — apa yang anda masukkan tidak dimuat naik

Konsol

    Kod berjalan dalam kotak pasir terpencil tanpa akses kepada data tapak ini dan tiada apa yang dimuat naik. Muat turun ialah satu fail HTML gabungan. Tab digunakan untuk inden dalam editor; tekan Esc kemudian Tab untuk memindahkan fokus keluar.

    Cara menggunakan

    1. Tukar antara editor HTML, CSS dan JavaScript dengan butang di atas, kemudian tulis kod.
    2. Pratonton dikemas kini secara automatik apabila anda berhenti menaip, atau matikan ciri itu dan klik Jalankan.
    3. Semak konsol untuk output dan ralat, kemudian klik Muat turun HTML untuk menyimpan halaman.

    Penerangan pilihan

    Kotak pasir
    Pratonton berjalan dalam kotak pasir terpencil yang tidak boleh membaca kuki atau storan tapak ini dan tidak boleh membuka dialog.
    Konsol
    Menunjukkan output console.log, warn dan error serta ralat tidak ditangkap dengan nombor baris, sambil mengekalkan 200 entri terkini.
    Muat turun
    Menggabungkan tiga bahagian menjadi satu fail HTML, dengan gaya dalam tag style dan skrip di hujung body.

    Cara halaman disusun

    Ketiga-tiga editor digabungkan menjadi satu dokumen, mengikut urutan ini. Susun atur yang sama ialah apa yang anda dapat apabila anda mengklik Muat turun HTML, kecuali skrip kecil yang menghantar output konsol ke halaman di bawah pratonton ditinggalkan daripada muat turun.

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

    Oleh sebab skrip datang selepas HTML anda, anda boleh menggunakan document.getElementById terus tanpa menunggu halaman dimuatkan. Anda hanya menulis apa yang termasuk di dalam body dalam editor HTML, bukan teg html, head atau body itu sendiri. Pratonton ialah iframe yang hanya mempunyai kebenaran untuk menjalankan skrip, sebab itulah dialog amaran dan akses kepada kuki tapak ini disekat.

    Soalan lazim

    Bolehkah saya menggunakan pustaka luaran?

    Ya. Tambah tag script atau link yang menuju CDN seperti jsDelivr dalam editor HTML.

    Mengapa alert tidak muncul?

    Kotak pasir menyekat dialog, jadi alert dan confirm tidak melakukan apa-apa. Gunakan console.log.

    Adakah kod saya disimpan?

    Kod tidak disimpan atau dimuat naik. Muat turun fail HTML sebelum menutup halaman.

    Privasi

    Alat ini berjalan sepenuhnya dalam pelayar anda. Fail dan teks anda diproses pada peranti anda dan tidak pernah dimuat naik ke pelayan kami.

    Alat berkaitan