Playground HTML, CSS e JS

Cosa fa

Questo playground è un piccolo editor di codice online per esperimenti front-end. Scrivi HTML, CSS e JavaScript in tre schede con evidenziazione della sintassi e l’anteprima si aggiorna mentre scrivi, come CodePen o JSFiddle ma senza account. Una console integrata mostra l’output di console.log() e gli errori con il numero di riga nel tuo JavaScript, così puoi fare debug senza aprire gli strumenti per sviluppatori. È comodo anche su uno smartphone o su un computer in prestito.

Usalo per provare un layout CSS, riprodurre un bug per un collega, testare uno snippet di Stack Overflow, insegnare a un principiante o abbozzare un prototipo veloce.

Come si usa

1. Scrivi nelle schede HTML, CSS e JS, oppure premi Esempio per partire da una piccola demo di contatore. Un punto su una scheda indica che contiene codice.
2. L’anteprima si avvia automaticamente 0,6 secondi dopo che smetti di scrivere. Disattiva Esecuzione automatica per gli script pesanti e premi Esegui o Ctrl+Enter quando sei pronto.
3. Tieni d’occhio la Console per log, avvisi ed errori; la riga più recente è sempre in cima. Oggetti, array, Map, Set ed elementi DOM vengono mostrati in forma compatta e leggibile.
4. Usa Condividi per inviare il codice a qualcuno. Scarica ZIP salva index.html, style.css e script.js come file separati, pronti per un progetto vero; Scarica HTML salva tutto in un unico file index.html che si apre in qualsiasi browser.

Il tuo codice viene conservato in questo browser, quindi lo ritrovi quando torni. Il tasto Tab indenta con due spazi.

Esempio

HTML:

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

JavaScript:

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

Ogni clic aggiunge una riga alla console. Se scrivi male un nome, la console mostra un ReferenceError rosso con la riga della scheda JS in cui si è verificato.

Come funziona

I tre pannelli vengono combinati in un unico documento HTML e caricati in un iframe con l’attributo sandbox, quindi il codice non può leggere i cookie o lo storage di questo sito. Un piccolo script aggiunto al frame inoltra alla pagina le chiamate alla console e gli errori non gestiti, e nulla lascia il tuo dispositivo.