Desminifica i formata el codi en línia
Enganxa JavaScript, CSS, HTML, XML o JSON minificat i obtén codi llegible i ben sagnat. És gratuït, immediat i es processa íntegrament al navegador.
Desminifica un format concret
Cada format té una pàgina pròpia amb els detalls rellevants del llenguatge:
Què és la minificació de codi?
Els desenvolupadors escriuen codi perquè altres desenvolupadors el puguin entendre. Hi afegeixen comentaris, sagnat, línies en blanc entre blocs i noms de variables que expliquen què contenen. Tot això ajuda les persones, però al navegador no li cal. La minificació és el pas de construcció que elimina el que la màquina no necessita: espais, salts de línia, comentaris i, molt sovint, els noms originals de variables i funcions, que es reescriuen amb una sola lletra. El comportament del programa es manté exactament igual; només en canvia la presentació.
L'estalvi és considerable. Un paquet JavaScript minificat sol ocupar entre un 30 i un 70 per cent menys que el codi font. Això implica menys bytes per la xarxa, una primera visualització més ràpida i millors Core Web Vitals. Per això gairebé tots els llocs en producció serveixen JS, CSS i HTML minificats. La contrapartida és que el fitxer que baixes d'un lloc web acostuma a ser una línia compacta impossible de llegir. Quan necessites entendre'l, depurar-lo o auditar què fa realment, el primer pas és desminificar-lo.
Què fa aquest desminificador?
LFUnminify rep codi minificat i en reconstrueix una estructura llegible. Restableix el sagnat, situa cada instrucció en una línia pròpia, separa blocs i operadors i aplica regles de format coherents amb el llenguatge detectat. Un paquet de quatre mil caràcters en una sola línia es converteix en centenars de línies ben imbricades que pots recórrer, cercar i entendre.
Per fer-ho executa Prettier, el formatador que ja utilitzen molts equips de JavaScript, directament al navegador. El resultat segueix les convencions que aplicaria el teu editor a un fitxer font normal i, per tant, et resulta familiar. La detecció és automàtica: enganxa el contingut i l'eina determinarà si és JavaScript, CSS, HTML, XML o JSON abans de formatar-lo amb l'analitzador corresponent.
Hi ha un límit que convé deixar clar des del principi. Desminificar no és descompilar. Els comentaris, els noms originals de les variables i les notes del desenvolupador es van eliminar durant la construcció i cap eina no els pot recuperar. Obtens codi ben estructurat, llegible i fàcil de recórrer, però amb els noms curts del minificador. A la pràctica, això permet seguir la lògica, localitzar una funció o identificar què envia un script i a quina destinació.
Formats de codi compatibles
Un sol editor, cinc llenguatges. LFUnminify llegeix el contingut que enganxes, en detecta el llenguatge i el passa a l'analitzador preparat per a aquella sintaxi. No has de triar cap format en un menú, i fins i tot un fitxer amb una extensió incorrecta es processa segons el contingut:
- JavaScript, inclosa la sintaxi ES6 i posterior, els mòduls, el codi asíncron i JSX. El cas habitual és un paquet generat amb webpack, Vite, esbuild o Terser.
- CSS, amb sintaxi moderna, propietats personalitzades, consultes de mitjans i regles imbricades. Ideal per a fulls d'estil compilats amb Tailwind, Sass o PostCSS.
- HTML, amb els blocs script i style integrats, que es formaten juntament amb el marcatge en lloc de quedar en una línia llarga.
- XML, inclosos mapes del lloc, canals RSS, fitxers SVG, embolcalls SOAP i fitxers de configuració sense cap salt de línia.
- JSON, incloses respostes d'API molt imbricades, manifests de paquets, fitxers de configuració i dades de registres.
Quan necessites desminificar codi?
Rarament es desminifica només per curiositat. Sovint és la manera més ràpida de respondre una pregunta concreta sobre codi que no has escrit, o sobre codi propi que ja no pots llegir:
- Depurar un error en producció. La traça de pila assenyala la línia 1, columna 24815 d'un paquet. Formatar el fitxer et dona números de línia útils i et permet trobar la funció que ha provocat l'error.
- Auditar un script de tercers. Abans d'afegir una etiqueta d'analítica, un giny de xat o un script d'afiliació al lloc web, desminifica'l i comprova quines dades recull, amb quins dominis es comunica i què desa al navegador.
- Llegir un full d'estil compilat. Els entorns d'utilitats generen fitxers CSS enormes en una sola línia. Formatar-los permet seguir la cascada, localitzar la regla que preval i entendre per què s'ignora la teva sobreescriptura.
- Inspeccionar una resposta d'API. Les dades JSON copiades de la pestanya de xarxa són difícils de llegir sense format. Amb el sagnat, l'estructura, la imbricació i el camp que falta es fan evidents en qüestió de segons.
- Aprendre de codi real. Llegir com una biblioteca ben dissenyada resol un problema ajuda a progressar, i un fitxer formatat permet fer-ho amb comoditat.
Com s'utilitza LFUnminify
Pots introduir codi a l'editor de tres maneres. Enganxa'l directament al panell esquerre, prem Tria un fitxer per obrir-ne un de l'ordinador o arrossega'l a l'àrea d'entrada. Per inspeccionar un recurs d'un lloc web, obre'l amb view-source o amb les DevTools del navegador, copia'l i enganxa'l aquí. També pots desar el fitxer .js, .css, .html, .xml o .json i obrir-lo amb Tria un fitxer.
El formatatge s'inicia automàticament, sense haver de buscar cap botó. L'eina espera que deixis d'escriure, detecta el llenguatge i mostra el resultat al panell dret amb ressaltat de sintaxi. Des d'allà pots copiar tota la sortida al porta-retalls amb un clic o baixar-la com a fitxer amb un nom adequat per obrir-la al teu editor.
Dos detalls ajuden amb els fitxers llargs. Activa els números de línia si has d'indicar una posició concreta o comparar dues versions; la preferència es conserva per a la visita següent. Si el format detectat no és l'esperat, això també pot ser una pista: un fitxer reconegut com a JavaScript quan esperaves JSON sovint és una resposta JSONP o una configuració embolcallada en una assignació.
El codi no surt mai del teu ordinador
Cal dir-ho amb claredat. El formatatge es fa localment al navegador, amb JavaScript que es carrega una sola vegada amb la pàgina. El codi no s'envia, no s'encua en cap servidor, no s'escriu en cap base de dades ni queda registrat. Pots desconnectar la xarxa després de carregar la pàgina i el desminificador continuarà funcionant: és la prova més senzilla que no es transmet res.
Això et permet enganxar codi propietari, un paquet intern, un projecte d'un client o una configuració l'estructura de la qual prefereixes no compartir. Res del que enganxes o obres no surt del navegador. L'eina tampoc no descarrega fitxers per tu, de manera que el nostre servidor no sap quin codi ni quins llocs examines. No cal crear cap compte i no es fa seguiment del contingut que enganxes.
Per què LFUnminify és gratuït?
LFUnminify forma part d'una família d'eines gratuïtes creades per Ludovic Frank, juntament amb un generador de contrasenyes, un generador de favicons, un creador de paletes de colors i altres utilitats. La idea és senzilla: les petites eines que els desenvolupadors obren diverses vegades per setmana haurien de ser accessibles sense formularis de registre, murs de publicitat ni quotes. Aquí no hi ha comptes, límits d'ús ni ofertes de pagament dins del producte.
També és una demostració que funciona de debò. Cada eina és una aplicació real, creada i mantinguda amb els mateixos criteris que els projectes dels clients. Això explica millor com treballem que una pàgina de portafolis. Si necessites desenvolupament web a mida, una aplicació completa o assessorament tècnic, trobaràs com contactar amb nosaltres a l'enllaç del peu de pàgina.
Preguntes freqüents
Puc recuperar el codi font original d'un fitxer minificat?
No del tot, i desconfia de les eines que prometen el contrari. La minificació elimina definitivament els comentaris i sol substituir els noms de les variables per lletres; aquesta informació ja no existeix al fitxer. LFUnminify restableix l'estructura, el sagnat i els salts de línia perquè el codi torni a ser llegible, però no pot inventar els noms o comentaris eliminats durant la construcció. Si el paquet inclou un mapa de codi font, aquesta és l'única via per recuperar l'original.
El meu codi s'envia a un servidor?
No. El formatatge s'executa íntegrament al navegador amb el JavaScript carregat amb la pàgina. No s'envia, desa ni registra res. El nostre servidor tampoc no descarrega recursos per tu. Si vols inspeccionar un fitxer d'un lloc web, el copies o el deses tu mateix i l'obres aquí; tot el procés queda entre tu i el navegador.
Quins formats s'admeten?
JavaScript, CSS, HTML, XML i JSON. El format es detecta automàticament a partir del contingut i cada llenguatge es processa amb el seu analitzador. JavaScript inclou sintaxi moderna, mòduls ES i JSX; CSS inclou propietats personalitzades i regles imbricades; XML admet des de mapes del lloc i canals RSS fins a fitxers SVG.
Hi ha cap límit de mida?
No hi ha un límit estricte per al contingut enganxat, tot i que els fitxers molt grans triguen més perquè el processament es fa al teu ordinador. Un portàtil habitual pot formatar paquets de diversos megabytes sense problemes. La mateixa regla s'aplica als fitxers oberts amb Tria un fitxer o arrossegats a l'entrada, ja que es llegeixen localment i no s'envien enlloc.
Quina diferència hi ha entre desminificar i embellir?
A la pràctica descriuen la mateixa operació i aquesta eina fa totes dues coses alhora. Desminificar sol voler dir desfer la compressió d'un pas de construcció, mentre que embellir és aplicar regles d'estil coherents a qualsevol codi, minificat o no. Com que LFUnminify executa Prettier sobre l'entrada, també serveix per corregir codi mal sagnat que mai no s'ha minificat.
Puc utilitzar-lo amb JavaScript ofuscat?
Pots formatar-lo, i sovint és un primer pas útil, però formatar no és desofuscar. Els ofuscadors van més enllà de la minificació: codifiquen cadenes, compliquen el flux de control i afegeixen codi mort expressament. El formatatge et dona una estructura llegible per estudiar la lògica, però les tècniques que n'amaguen la intenció continuen presents.