Rendi leggibile e formatta il tuo codice online

Formatta un linguaggio specifico

Ogni formato ha una pagina dedicata, con i dettagli utili per quel linguaggio:

• Formattare JavaScriptJavaScript
• Formattare CSSCSS
• Formattare HTMLHTML
• Formattare XMLXML
• Formattare JSONJSON

Che cos'è la minificazione del codice?

Gli sviluppatori scrivono codice che i colleghi devono poter rileggere: commenti, indentazione, righe vuote e nomi di variabili espliciti facilitano questo lavoro. La minificazione riduce le dimensioni dei file destinati alla produzione eliminando gli elementi che lo strumento ritiene superflui per l'esecuzione. A seconda del linguaggio e delle impostazioni, rimuove spazi, interruzioni di riga e commenti. In JavaScript può anche abbreviare i nomi delle variabili locali e riscrivere alcune espressioni. L'obiettivo è conservare il comportamento del programma producendo un file più compatto.

Il risparmio dipende dal codice di partenza, dal minificatore e dalla compressione usata nel trasferimento. File più piccoli possono ridurre la quantità di dati scaricati, ma la velocità di visualizzazione dipende anche dalla rete, dalla cache e dal lavoro svolto dal browser. Molti siti distribuiscono così JavaScript, CSS o HTML minificato. Lo svantaggio emerge quando occorre rileggere questi file: le istruzioni sono raccolte in righe lunghissime e la struttura diventa difficile da seguire. Ripristinare la formattazione è quindi un primo passo utile per esaminare un file, cercare una funzione o avviare una diagnosi.

Che cosa fa questo strumento?

LFUnminify prende il codice minificato e gli restituisce una struttura leggibile. Ripristina l'indentazione, distribuisce le istruzioni su righe separate, aggiunge spazi tra blocchi e operatori e applica regole di formattazione coerenti con il linguaggio rilevato. Un bundle di quattromila caratteri su una sola riga può diventare qualche centinaio di righe ben organizzate, da scorrere, esplorare e comprendere.

Dietro le quinte lo strumento esegue Prettier, il formattatore che la maggior parte dei team JavaScript usa già, direttamente nel tuo browser. Il risultato corrisponde quindi a ciò che il tuo editor produrrebbe su un normale file sorgente: ha un aspetto familiare, non quello di un testo generato da una macchina. Il rilevamento è automatico: incolla qualsiasi cosa e lo strumento stabilisce se si tratta di JavaScript, CSS, HTML, XML o JSON prima di formattarlo di conseguenza.

La deminificazione ha comunque dei limiti. Non ricostruisce i commenti eliminati, i nomi originali delle variabili o l'organizzazione iniziale dei file sorgenti. Queste informazioni in genere non sono più presenti nel file minificato. Ottieni una presentazione più leggibile, con i nomi abbreviati ancora presenti e le trasformazioni applicate durante la compilazione. Una source map fornita con il progetto può aiutarti a ritrovare i sorgenti negli strumenti di sviluppo, ma LFUnminify non elabora questi file. Il risultato resta utile per seguire una funzione, esaminare stringhe di testo o individuare chiamate di rete.

Formati di codice supportati

Un solo editor accetta cinque formati. LFUnminify esamina il contenuto incollato o importato per proporre automaticamente il linguaggio, senza basarsi soltanto sull'estensione del file. Controlla il formato rilevato, perché alcuni frammenti possono risultare ambigui. Le elaborazioni disponibili rispondono a queste esigenze:

• JavaScript, compresa la sintassi ES6 e successive, i moduli, il codice asincrono e JSX. Il caso tipico è un bundle prodotto da webpack, Vite, esbuild o Terser.
• CSS, comprese la sintassi moderna, le proprietà personalizzate, le media query e le regole annidate. Ideale per un foglio di stile compilato da Tailwind, Sass o PostCSS.
• HTML, compresi i blocchi script e style incorporati, che vengono formattati insieme al markup invece di restare su un'unica lunga riga.
• XML, compresi sitemap, feed RSS, file SVG, envelope SOAP e file di configurazione arrivati senza una sola interruzione di riga.
• JSON, comprese le risposte API con molti livelli di annidamento, i manifesti dei pacchetti, i file di configurazione e i dati dei log strutturati.

Quando serve rendere leggibile il codice minificato?

Raramente si deminifica per semplice curiosità. Spesso è il modo più rapido per rispondere a una domanda precisa su codice scritto da altri, oppure su codice tuo che non riesci più a leggere:

• Diagnosticare un errore in produzione. Una traccia di esecuzione indica la riga 1, colonna 24815 di un bundle. Formattarne una copia facilita la lettura delle funzioni coinvolte. Le nuove posizioni però non corrispondono più alle coordinate del file minificato: conserva anche l'originale.
• Esaminare uno script di terze parti. Prima di aggiungere al sito un tag di analisi, un widget di chat o uno script di affiliazione, formattalo e verifica quali dati raccoglie, quali domini contatta e che cosa scrive nella memoria del browser.
• Rileggere un foglio di stile compilato. I framework di classi di utilità producono enormi file CSS su una sola riga. Formattarli permette di seguire la cascata, individuare la regola che prevale e capire perché la tua modifica viene ignorata.
• Esaminare una risposta API. Un documento JSON copiato dalla scheda Rete è difficile da leggere finché non viene formattato. Una volta ordinato, bastano pochi secondi per riconoscerne la struttura, i livelli di annidamento e il campo mancante.
• Imparare dal codice reale. Esaminare come una libreria risolve un problema aiuta a comprenderne le scelte. Una copia formattata facilita la lettura, anche se il file distribuito non conserva nomi, commenti e organizzazione dei sorgenti del progetto.

Come usare LFUnminify

Puoi inserire il codice nell'editor in tre modi. Incollalo direttamente nel pannello a sinistra, fai clic su File per importare un file dal dispositivo oppure trascinalo nell'area di inserimento. Per esaminare una risorsa pubblicata su un sito, aprila dal codice sorgente della pagina o dagli strumenti di sviluppo del browser, copiala e incollala qui. In alternativa, salva il file .js, .css, .html, .xml o .json e aprilo con File.

La formattazione parte automaticamente, senza dover cercare un pulsante. Lo strumento aspetta che tu smetta di scrivere, rileva il linguaggio e mostra il risultato formattato nel pannello a destra, con l'evidenziazione della sintassi. Puoi quindi copiare l'intero risultato negli appunti con un clic oppure scaricarlo come file con un nome appropriato, per aprirlo nel tuo editor.

Due piccoli accorgimenti utili con i file lunghi. Attiva i numeri di riga quando devi indicare una posizione precisa o confrontare due versioni affiancate: la preferenza viene conservata per la visita successiva. E se il formato rilevato non è quello che ti aspettavi, di solito è già di per sé un indizio: un file riconosciuto come JavaScript quando pensavi fosse JSON si rivela spesso una risposta JSONP o una configurazione racchiusa in un'assegnazione.

Il tuo codice resta sul tuo dispositivo

La formattazione avviene localmente, nel browser. Il contenuto che incolli o importi nell'editor non viene inviato al nostro server per essere elaborato, registrato in un database o aggiunto ai log. È il browser a eseguire tutte le operazioni necessarie per la formattazione. Una volta caricati l'applicazione e i componenti necessari, questa elaborazione non dipende da un servizio remoto che analizzi i file. Puoi così esaminare il codice senza doverlo caricare su un server di formattazione.

Questo approccio è utile per rileggere un bundle interno, un progetto di un cliente o la struttura di un file di configurazione. Durante l'elaborazione il codice resta nell'editor del browser. Lo strumento non scarica neppure risorse da un indirizzo che gli fornisci: sei tu a copiare il contenuto, aprire un file locale o trascinarlo nell'area di inserimento. Per usare queste funzioni non serve un account. Come per qualsiasi lavoro su dati riservati, scegli un dispositivo e un ambiente browser compatibili con le tue regole di lavoro.

Perché LFUnminify è gratuito?

LFUnminify fa parte di una famiglia di strumenti gratuiti sviluppati da Ludovic Frank, insieme a un generatore di password, un generatore di favicon, un creatore di palette di colori e altri strumenti. L'idea è semplice: le piccole utilità che uno sviluppatore apre più volte alla settimana non dovrebbero richiedere una registrazione, essere sommerse di pubblicità o imporre quote d'uso. Qui non ci sono account obbligatori, quote o offerte a pagamento inserite nel prodotto.

È anche una dimostrazione concreta del nostro lavoro. Ogni strumento della famiglia è un'applicazione reale, costruita e mantenuta con la stessa cura dei progetti per i clienti, e racconta il nostro metodo meglio di una pagina di portfolio. Se ti servono sviluppo web su misura, una vera applicazione anziché un modello preconfezionato o consulenza tecnica, trovi il collegamento in fondo alla pagina.

Domande frequenti