LFUnminify, lo strumento online di Ludovic Frank per formattare codice minificato

Formattare JavaScript online

Incolla un file .js minificato, un bundle webpack o un frammento su una sola riga e ottieni JavaScript ben indentato nel pannello a destra. Prettier esegue la formattazione nel browser, senza inviare il codice a un server.

Il codice formattato apparirà qui

Perché JavaScript diventa illeggibile

I processi di compilazione moderni possono minificare JavaScript prima della distribuzione. Terser, esbuild, SWC e altri strumenti rimuovono spazi e commenti, abbreviano i nomi locali e semplificano alcune espressioni in base alla configurazione. Una fase distinta di assemblaggio può riunire molti moduli in un bundle. Il browser riceve così file compatti, con istruzioni che talvolta occupano una sola riga. Questa presentazione è adatta al trasferimento e all'esecuzione, ma complica l'esame manuale: diventa difficile distinguere funzioni, condizioni e chiamate che contribuiscono al comportamento osservato.

Che cosa restituisce davvero la formattazione

Formattare un bundle rende di nuovo visibile la sua struttura. L'indentazione aiuta a individuare l'inizio e la fine delle funzioni, seguire i rami condizionali e leggere una sequenza di callback. Stringhe, URL e nomi ancora presenti diventano più facili da cercare. Questo aiuta, per esempio, a esaminare le chiamate di uno script di terze parti o a individuare un errore in un'applicazione. Attenzione alle posizioni: i numeri di riga e colonna di una traccia di esecuzione si riferiscono al file minificato originale. La formattazione crea nuove posizioni e non le collega automaticamente alla traccia.

Supporto per la sintassi moderna

Il formattatore analizza JavaScript attuale, non un sottoinsieme fermo a dieci anni fa. Funzioni freccia, classi, async e await, generatori, optional chaining, coalescenza dei valori nulli, template literal, destrutturazione, sintassi spread, importazioni dinamiche e moduli ES vengono formattati. È supportato anche JSX, utile quando esamini il sorgente di un componente React che lo contiene ancora. Poiché il lavoro è svolto da Prettier, il risultato segue convenzioni coerenti, anche se le impostazioni possono differire da quelle del tuo editor. Il rilevamento resta automatico: controlla il linguaggio indicato, soprattutto quando incolli un frammento isolato. Un estratto incompleto può richiedere il suo contesto per essere analizzato correttamente.

Quali sono i limiti

La formattazione non recupera le informazioni eliminate durante la compilazione. Non può indovinare che la variabile n aveva un nome descrittivo, né ripristinare i commenti dell'autore. Una source map fornita dal progetto può aiutarti a consultare i sorgenti negli strumenti di sviluppo del browser; LFUnminify non la carica. Uno script offuscato conserva stringhe codificate, percorsi artificiosi e codice aggiunto anche dopo la formattazione. Lavora su una copia e usa il risultato come supporto alla lettura. Prima di sostituire un file eseguito con la versione formattata, verificane il comportamento con i test del progetto.

Domande frequenti

Posso formattare un bundle webpack o Vite?

Sì. Incolla il bundle o importalo con il pulsante File: verrà elaborato come JavaScript. La presentazione ottenuta facilita la lettura delle funzioni e dei moduli ancora riconoscibili. Il tempo di elaborazione dipende dalle dimensioni del bundle e dal dispositivo; la formattazione non ricostruisce i file sorgenti separati.

Lo strumento deoffusca JavaScript?

Formatta il codice offuscato rendendolo molto più facile da leggere, ma non annulla l'offuscamento. Le stringhe codificate, il flusso di controllo artificiale e il codice morto aggiunto volutamente rimangono dove si trovavano.

Può compromettere il funzionamento del codice?

Il formattatore mira a conservare il comportamento del programma, ma può modificare più dei soli spazi: virgolette, punti e virgola o parentesi possono cambiare secondo le regole applicate. Conserva l'originale e rileggi il risultato. Se vuoi eseguire la versione formattata o integrarla in un progetto, svolgi le verifiche abituali di quel progetto.

Formatta un altro linguaggio