LFUnminify, spletno orodje za razširjanje kode avtorja Ludovica Franka

Spletno razširjanje kode HTML

Spremenite skrčeno izvorno kodo strani v berljive oznake. Oznake so zamaknjene glede na globino gnezdenja, atributi so pregledno razporejeni, vdelani skripti in slogi pa se oblikujejo skupaj z dokumentom.

Tukaj bo prikazana razširjena in urejena koda

Zakaj je izvorna koda strani videti tako

Minifikatorji HTML združijo presledke med oznakami, odstranijo komentarje, izpustijo neobvezne zaključne oznake in odstranijo narekovaje okoli vrednosti atributov, kjer niso potrebni. Strežniške predloge dodatno otežijo pregled, ker stran, sestavljena iz več deset delov, prispe kot enoten tok brez povezave z izvornimi datotekami. Odprite izvorno kodo skoraj kateregakoli produkcijskega spletišča in našli boste nekaj ogromnih vrstic, v katerih morate za iskanje zaključka odseka skoraj ročno šteti kotne oklepaje.

Bistvena je struktura

HTML je drevo, drevesa pa ni lahko brati, če je prikazano plosko. Zamiki glede na globino gnezdenja takoj pokažejo obliko dokumenta: kje se konča glava, kateri vsebnik obdaja glavno vsebino, kako globoko je umeščena komponenta in kateremu elementu manjka zaključna oznaka. Zaradi tega je oblikovana izvorna koda uporabna za preverjanje vrstnega reda naslovov, pregled oznak, ki jih je ustvarilo ogrodje, ali razumevanje zgradbe odseka na tujem spletišču.

Oblikujejo se tudi vdelani skripti in slogi

Prava stran redko vsebuje samo oznake. Analitični odlomki, strukturirani podatki JSON-LD, nastavitveni objekti in ključni CSS so pogosto neposredno vdelani v dokument, minifikator pa skrči tudi njih. Oblikovalnik vsak vdelani blok obdela z ustreznim razčlenjevalnikom. Oznaka script s skrčenim JavaScript tako postane berljiv JavaScript, oznaka style pa berljiv CSS, oboje znotraj pravilno zamaknjenega dokumenta. Celotno stran lahko zato pregledate brez ločenega kopiranja vsakega posameznega bloka.

Previdno ravnanje z oznakami, občutljivimi na presledke

Zamikanje HTML spremeni presledke med oznakami, ti pa lahko vplivajo na prikaz. Oblikovalnik to upošteva: vsebina elementov pre in textarea ostane nespremenjena, vrstični elementi pa se ne prelamljajo tako, da bi okoli besedila nastajali ali izginjali vidni presledki. Tako dobite dokument, ki ga lahko preberete, ob ohranjanju predvidenega prikaza strani. Kljub temu pred uporabo v produkciji preverite rezultat na kopiji in se ne zanašajte zgolj na lepšo razporeditev besedila.

Pogosta vprašanja

Ali lahko prilepim celotno izvorno kodo strani?

Da. Kopirajte izvorno kodo iz prikaza view-source v brskalniku ali shranite stran in odprite datoteko. Oblikoval se bo celoten dokument, vključno z glavo, telesom, vdelanimi skripti in strukturiranimi podatki.

Ali oblikovanje spremeni prikaz strani?

Načeloma ne. Vsebina elementov, občutljivih na presledke, kot sta pre in textarea, se ohrani, z vrstično vsebino pa orodje ravna previdno. Vseeno za branje oblikujte kopijo in rezultata ne objavite v produkciji brez preverjanja.

Ali deluje s predlogami Twig ali Blade?

Delno. Običajne oznake se oblikujejo pravilno, posebne oznake predlog z lastno skladnjo pa lahko zmedejo razčlenjevalnik HTML. Orodje je namenjeno HTML, ki ga brskalnik dejansko prejme, ne izvorni predlogi, ki ga je ustvarila.

Razširite drugo obliko