Vai al contenuto
ToolMug

Usa ↑ ↓ per spostarti, Invio per aprire, Esc per chiudere.

Playground HTML, CSS e JavaScript

Scrivi HTML, CSS e JavaScript a sinistra e osserva l'aggiornamento del risultato a destra, con una console sotto che mostra output di console.log ed errori degli script. È utile per imparare il front-end, provare uno stile o un'interazione o mostrare una demo; puoi scaricare tutto come un singolo file HTML.

Funziona nel tuo browser: nulla di ciò che inserisci viene caricato

Console

    Il codice viene eseguito in una sandbox isolata senza accesso ai dati di questo sito e nulla viene caricato. Il download è un unico file HTML completo. L’editor usa il Tab per il rientro; premi Esc e poi Tab per spostare il focus fuori.

    Come si usa

    1. Passa tra editor HTML, CSS e JavaScript con i pulsanti sopra e scrivi il codice.
    2. L'anteprima si aggiorna automaticamente quando smetti di digitare; in alternativa disattiva l'opzione e fai clic su Esegui.
    3. Controlla output ed errori nella console, poi fai clic su Scarica HTML per salvare la pagina.

    Opzioni spiegate

    Sandbox
    L'anteprima gira in una sandbox isolata che non può leggere cookie o spazio di archiviazione del sito e non può aprire finestre di dialogo.
    Console
    Mostra output di console.log, warn ed error, oltre agli errori non gestiti con numero di riga; conserva le ultime 200 voci.
    Download
    Unisce le tre parti in un file HTML, con gli stili in un tag style e lo script alla fine del body.

    Come viene assemblata la pagina

    I tre editor vengono combinati in un unico documento, in quest’ordine. È lo stesso layout che ottieni facendo clic su Scarica HTML, con la differenza che il piccolo script che invia l’output della console alla sezione sotto l’anteprima viene escluso dal download.

    <!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>

    Poiché lo script viene dopo il tuo HTML, puoi usare document.getElementById subito senza aspettare il caricamento della pagina. Nell’editor HTML scrivi solo ciò che va dentro il body, non i tag html, head o body veri e propri. L’anteprima è un iframe che ha solo il permesso di eseguire script, ed è per questo che le finestre di dialogo alert e l’accesso ai cookie di questo sito sono bloccati.

    Domande frequenti

    Posso usare librerie esterne?

    Sì. Aggiungi nell'editor HTML un tag script o link che punti a un CDN come jsDelivr.

    Perché alert non appare?

    La sandbox blocca le finestre di dialogo, quindi alert e confirm non fanno nulla. Usa invece console.log.

    Il mio codice viene salvato?

    Non viene salvato né caricato. Scarica il file HTML prima di chiudere la pagina.

    Privacy

    Questo strumento funziona interamente nel tuo browser. File e testi vengono elaborati sul tuo dispositivo e non vengono mai caricati sui nostri server.

    Strumenti correlati