Desminifica HTML en línia
Converteix el codi font comprimit d'una pàgina en marcatge llegible. Les etiquetes se sagnen segons la profunditat, els atributs es distribueixen amb claredat i els scripts i estils integrats es formaten amb el document.
Per què el codi font té aquest aspecte
Els minificadors HTML redueixen els espais entre etiquetes, eliminen comentaris, suprimeixen etiquetes de tancament opcionals i retiren les cometes dels atributs que no les necessiten. Les plantilles del servidor hi afegeixen complexitat: una pàgina muntada amb desenes de fragments arriba com un flux únic sense relació visible amb els fitxers originals. Obre el codi font de gairebé qualsevol lloc en producció i hi trobaràs unes poques línies enormes, on localitzar el tancament d'una secció exigeix comptar signes angulars a ull.
L'estructura és el que importa
L'HTML és un arbre, i un arbre és difícil de llegir si es presenta pla. El sagnat segons la profunditat revela de seguida la forma del document: on acaba la capçalera, quin contenidor envolta el contingut principal, a quina profunditat hi ha un component i a quin element li falta el tancament. Per això un codi font formatat és útil per revisar l'ordre dels títols, inspeccionar el marcatge generat per un entorn o entendre com s'ha estructurat una secció.
També es formaten els scripts i estils integrats
Una pàgina real rarament conté només marcatge. Fragments d'analítica, dades estructurades JSON-LD, objectes de configuració i CSS crític s'integren directament al document i també es minifiquen. El formatador tracta cada bloc amb l'analitzador adequat: una etiqueta script amb JavaScript minificat dona JavaScript llegible i una etiqueta style dona CSS llegible, tot dins del document ben sagnat.
Respecte per les etiquetes sensibles als espais
Sagnar HTML modifica els espais entre etiquetes i aquests poden ser significatius. El formatador ho té en compte: el contingut de pre i textarea es conserva tal com és, i els elements en línia no es divideixen de manera que afegeixin o eliminin espais visibles al voltant del text. Així obtens un document llegible tot respectant la presentació de la pàgina.
Preguntes freqüents
Puc enganxar el codi font complet d'una pàgina?
Sí. Copia'l amb view-source al navegador, o desa la pàgina i obre el fitxer. Es formatarà el document sencer, inclosos head, body, els scripts integrats i les dades estructurades.
El formatatge canviarà l'aspecte de la pàgina?
En principi, no. Es preserven elements sensibles als espais com pre i textarea i es tracta el contingut en línia amb cura. Tot i així, formata una còpia per llegir-la i prova el resultat abans de tornar-lo a posar en producció.
Funciona amb plantilles Twig o Blade?
En part. El marcatge estàndard es formata bé, però les etiquetes amb sintaxi pròpia de la plantilla poden confondre l'analitzador HTML. L'eina està pensada per a l'HTML que rep el navegador, més que no pas per a la plantilla que el genera.