Převeďte minifikovaný kód do čitelné podoby online

Zpřehlednit konkrétní formát

Každý formát má vlastní stránku s podrobnostmi důležitými pro daný jazyk:

• Zpřehlednit JavaScriptJavaScript
• Zpřehlednit CSSCSS
• Zpřehlednit HTMLHTML
• Zpřehlednit XMLXML
• Zpřehlednit JSONJSON

Co je minifikace kódu?

Minifikace zmenšuje soubor s kódem odstraněním textu, který není nutný ke spuštění, například některých mezer, zalomení řádků a komentářů. Minifikátory JavaScriptu mohou také zkracovat lokální názvy a přepisovat výrazy. Vývojáři si ponechávají čitelné zdrojové soubory, zatímco sestavovací nástroje vytvářejí kompaktní verze určené k doručení. Tyto úpravy mají zachovat chování, jejich přesný účinek však závisí na jazyku, minifikátoru a jeho nastavení. Produkční soubor proto často vypadá velmi odlišně od zdrojového kódu, který upravoval jeho autor.

Menší soubory mohou snížit objem přenášených dat, zejména v kombinaci se síťovou kompresí a ukládáním do mezipaměti. Úspora závisí na původním souboru a nastavení sestavení. Neexistuje pevné procento ani záruka rychlejšího načítání stránky. Cenou je horší čitelnost. Pokud skript nebo stylopis tvoří jediný hustý řádek, je obtížné sledovat podmínku nebo najít selektor. Naformátování kopie usnadní prohlížení a původní sestavení i nastavení jeho doručování zůstanou k dispozici pro porovnání.

Co tento nástroj pro zpřehlednění kódu dělá?

LFUnminify převede kompaktní kód do čitelnější podoby. Přidá odsazení, mezery u bloků a operátorů a zalomení řádků podle zvoleného formátovače. Výsledek usnadňuje sledování vnořených struktur, hledání hodnot a prohlížení funkcí bez čtení jediného nepřehledného řádku. Rozsah úprav závisí na vstupu a rozpoznaném jazyku, nikoli na pevném pravidle, že každý příkaz musí zabírat vlastní řádek.

Na pozadí používá Prettier, formátovač, který většina javascriptových týmů už používá, a to přímo ve vašem prohlížeči. Výstup proto odpovídá tomu, co by váš vlastní editor vytvořil z běžného zdrojového souboru, takže výsledek působí povědomě, ne strojově. Rozpoznávání je automatické: vložte cokoli a nástroj zjistí, zda jde o JavaScript, CSS, HTML, XML nebo JSON, a podle toho obsah naformátuje.

Formátování neobnoví původní projekt. Názvy, komentáře a zdrojové soubory odstraněné při sestavení nelze získat zpět pouhou úpravou rozložení. Chybějící souvislosti mohou poskytnout mapy zdrojového kódu nebo původní repozitář, tento nástroj je však nenačítá ani nepřepočítává pozice ve výpisech zásobníku volání. Výsledkem je čitelná pracovní kopie k prohlížení, která zachovává názvy a strukturu programu obsažené v dodaném souboru.

Podporované formáty kódu

Jeden editor, pět jazyků. LFUnminify přečte vložený obsah, zjistí, o jaký jazyk jde, a předá jej syntaktickému analyzátoru vytvořenému pro danou syntaxi. Formát nikdy nemusíte vybírat z nabídky a správně se zpracuje i soubor s nesprávnou příponou:

• JavaScript včetně syntaxe ES6 a novější, modulů, asynchronního kódu a JSX. Typickým příkladem je balík vytvořený nástrojem webpack, Vite, esbuild nebo Terser.
• CSS včetně moderní syntaxe, vlastních vlastností, mediálních dotazů a vnořených pravidel. Vhodné pro stylopisy sestavené pomocí Tailwind, Sass nebo PostCSS.
• HTML včetně vložených bloků script a style, které se formátují spolu se značkováním, místo aby zůstaly na jednom dlouhém řádku.
• XML včetně map webu, kanálů RSS, souborů SVG, obálek SOAP a konfiguračních souborů, které dorazily bez jediného zalomení řádku.
• JSON včetně hluboce vnořených odpovědí API, manifestů balíčků, konfiguračních souborů a datových záznamů protokolů.

Kdy se hodí zpřehlednit minifikovaný kód

Zpřehlednění kódu obvykle neslouží jen k uspokojení zvědavosti. Často je to nejrychlejší cesta k odpovědi na konkrétní otázku o cizím kódu nebo o vlastním kódu, který už nedokážete pohodlně přečíst:

• Zkoumání chyby v produkci. Naformátování balíku odhalí funkce a větvení, které se na jediném řádku špatně čtou. Původní pozice ve výpisu zásobníku volání se na nové rozložení automaticky nepřevádějí. Použijte ladicí nástroje prohlížeče a mapy zdrojového kódu, pokud jsou k dispozici.
• Kontrola skriptu třetí strany. Než na web přidáte analytickou značku, chatovací widget nebo partnerský skript, zpřehledněte jej a zjistěte, co sbírá, jaké domény kontaktuje a co zapisuje do úložiště.
• Čtení sestaveného stylopisu. Frameworky s pomocnými třídami vytvářejí obrovské jednořádkové soubory CSS. Naformátování umožní sledovat kaskádu, najít vítězné pravidlo a pochopit, proč se vaše přepsání neuplatní.
• Prohlížení odpovědi API. Data JSON zkopírovaná z panelu síťových požadavků jsou bez formátování nepřehledná. Po naformátování během chvilky uvidíte strukturu, vnoření i chybějící pole.
• Učení ze skutečného kódu. Čtení toho, jak dobře navržená knihovna řeší problém, vám pomůže rychle se zlepšit. Naformátovaný soubor se přitom čte mnohem pohodlněji.

Jak používat LFUnminify

Kód do editoru dostanete třemi způsoby. Vložte jej přímo do levého panelu, kliknutím na Vybrat soubor načtěte soubor z počítače nebo jej přetáhněte do vstupní oblasti. Chcete-li prozkoumat soubor poskytovaný živým webem, otevřete jej přes zobrazení zdrojového kódu nebo vývojářské nástroje prohlížeče, zkopírujte ho a vložte sem. Případně uložte soubor .js, .css, .html, .xml nebo .json a otevřete jej pomocí volby Vybrat soubor.

Formátování se spustí samo, žádné tlačítko nemusíte hledat. Nástroj počká, až přestanete psát, rozpozná jazyk a zobrazí naformátovaný výsledek v pravém panelu se zvýrazněnou syntaxí. Celý výstup pak jedním kliknutím zkopírujete do schránky nebo stáhnete jako vhodně pojmenovaný soubor pro otevření ve svém editoru.

Dvě drobnosti, které pomáhají u dlouhých souborů. Zapněte čísla řádků, když potřebujete odkázat na přesné místo nebo porovnat dvě verze vedle sebe, nastavení se pamatuje pro příští návštěvu. A pokud rozpoznaný formát není ten, který jste čekali, bývá to samo o sobě vodítko: soubor rozpoznaný jako JavaScript, ačkoli jste ho považovali za JSON, se často ukáže jako odpověď JSONP nebo konfigurace zabalená do přiřazení.

Váš kód neopustí váš počítač

Formátování probíhá místně v prohlížeči pomocí kódu načteného se stránkou. LFUnminify nenahrává vstup z editoru na formátovací server, neukládá jej do databáze a ke zpracování nevyžaduje účet. Také soubory otevřené výběrem nebo přetažením se čtou místně. Jakmile se načtou potřebné prostředky stránky, formátování jednotlivých vstupů nevyžaduje síťový požadavek.

Místní zpracování se hodí, když chcete prozkoumat interní balík, projekt klienta nebo konfigurační soubor bez nahrávání jeho obsahu této službě. Nad otevíranými soubory i stahovanými kopiemi máte kontrolu. Nástroj za vás nestahuje vzdálené soubory: nejprve si je sami uložte nebo zkopírujte. K používání editoru nepotřebujete účet a formátování nezávisí na vzdálené frontě úloh.

Proč je LFUnminify zdarma?

LFUnminify patří do rodiny bezplatných nástrojů Ludovica Franka spolu s generátorem hesel, generátorem ikon webu, nástrojem pro tvorbu barevných palet a dalšími. Důvod je prostý: drobné pomůcky, po kterých vývojáři sahají několikrát týdně, nemají být podmíněny registrací, sledováním reklam nebo kreditovým limitem. Tento nástroj nevyžaduje účet, nemá kvóty a nenabízí placená rozšíření přímo v produktu.

Zároveň jde o praktickou ukázku naší práce. Každý nástroj v této rodině je skutečná aplikace, kterou vytváříme a udržujeme stejně jako projekty klientů. To o našem přístupu řekne více než stránka s portfoliem. Pokud potřebujete vývoj webu na míru, plnohodnotnou aplikaci místo šablony nebo technické poradenství, najdete nás přes odkaz v zápatí.

Časté dotazy