Zmeňte minifikovaný kód na čitateľný online

Formátovanie konkrétneho formátu

Každý formát má vlastnú stránku s podrobnosťami dôležitými pre daný jazyk:

• Formátovanie JavaScriptJavaScript
• Formátovanie CSSCSS
• Formátovanie HTMLHTML
• Formátovanie XMLXML
• Formátovanie JSONJSON

Čo je minifikácia kódu?

Minifikácia zmenšuje súbor s kódom odstránením textu, ktorý nie je potrebný na jeho vykonanie, napríklad niektorých medzier, zalomení riadkov a komentárov. Minifikátory JavaScriptu môžu tiež skracovať lokálne názvy a prepisovať výrazy. Vývojári si ponechávajú čitateľné zdrojové súbory, zatiaľ čo zostavovacie nástroje vytvárajú kompaktné verzie na distribúciu. Cieľom týchto úprav je zachovať správanie programu, ich presné účinky však závisia od jazyka, minifikátora a jeho nastavení. Produkčný súbor preto často vyzerá úplne inak než zdrojový kód, ktorý upravoval jeho autor.

Menšie súbory môžu znížiť objem prenášaných dát, najmä v kombinácii so sieťovou kompresiou a ukladaním do vyrovnávacej pamäte. Úspora závisí od pôvodného súboru a nastavení zostavenia; neexistuje pevné percento ani zaručené zrýchlenie stránky. Cenou za to je horšia čitateľnosť. Keď skript alebo štýly tvoria jediný hustý riadok, sledovať podmienku či nájsť selektor je náročné. Naformátovaná kópia poskytne prehľadné usporiadanie na skúmanie kódu, pričom pôvodné zostavenie a jeho distribučné nastavenia zostávajú k dispozícii na porovnanie.

Čo robí tento nástroj na formátovanie kódu?

LFUnminify upraví kompaktný kód do čitateľnejšej podoby. Pridá odsadenie, medzery okolo blokov a operátorov a zalomenia riadkov podľa použitého formátovača. Výsledok pomáha sledovať vnorené štruktúry, hľadať hodnoty a skúmať funkcie bez čítania jediného neprehľadného riadka. Rozsah úprav závisí od vstupu a rozpoznaného jazyka, neplatí teda pevné pravidlo, že každý príkaz bude na samostatnom riadku.

Na pozadí používa Prettier, formátovač, ktorý väčšina javascriptových tímov už používa, a to priamo vo vašom prehliadači. Výstup preto zodpovedá tomu, čo by váš vlastný editor vytvoril z bežného zdrojového súboru, takže výsledok pôsobí povedome, nie strojovo. Rozpoznávanie je automatické: vložte čokoľvek a nástroj zistí, či ide o JavaScript, CSS, HTML, XML alebo JSON, a podľa toho obsah naformátuje.

Formátovanie neobnoví pôvodný projekt. Názvy, komentáre ani zdrojové súbory odstránené pri zostavení nemožno získať späť iba úpravou vzhľadu. Mapy zdrojového kódu alebo pôvodný repozitár môžu poskytnúť chýbajúci kontext, tento nástroj ich však nenačítava ani neprepočítava pozície vo výpisoch zásobníka volaní. Výsledkom je čitateľná pracovná kópia na skúmanie s názvami a štruktúrou programu, ktoré zostali v dodanom súbore.

Podporované formáty kódu

Jeden editor, päť jazykov. LFUnminify prečíta vložený obsah, zistí, o aký jazyk ide, a odovzdá ho syntaktickému analyzátoru vytvorenému pre danú syntax. Formát nikdy nemusíte vyberať z ponuky a správne sa spracuje aj súbor s nesprávnou príponou:

• JavaScript vrátane ES6 a novšej syntaxe, modulov, asynchrónneho kódu a JSX. Typickým príkladom je balík vytvorený nástrojmi webpack, Vite, esbuild alebo Terser.
• CSS vrátane modernej syntaxe, vlastných premenných, mediálnych dopytov a vnorených pravidiel. Vhodné pre štýly zostavené pomocou Tailwind, Sass alebo PostCSS.
• HTML vrátane vložených blokov script a style, ktoré sa formátujú spolu so značkovaním, namiesto toho, aby zostali na jednom dlhom riadku.
• XML vrátane máp stránok, kanálov RSS, súborov SVG, obálok SOAP a konfiguračných súborov, ktoré dorazili bez jediného zalomenia riadka.
• JSON vrátane hlboko vnorených odpovedí API, manifestov balíkov, konfiguračných súborov a dát v protokoloch.

Kedy sa hodí formátovanie minifikovaného kódu

Úprava minifikovaného kódu málokedy slúži iba na uspokojenie zvedavosti. Zvyčajne je to najrýchlejší spôsob, ako zodpovedať konkrétnu otázku o cudzom kóde alebo o vlastnom kóde, ktorý už neviete prečítať:

• Skúmanie chyby v produkcii. Naformátovaný balík odhalí funkcie a vetvenia, ktoré sa v jednom riadku čítajú ťažko. Pôvodné pozície vo výpise zásobníka volaní sa automaticky neprenesú do nového rozloženia; používajte ladiace nástroje prehliadača a dostupné mapy zdrojového kódu.
• Kontrola skriptu tretej strany. Skôr než na stránku pridáte analytický kód, četový prvok alebo partnerský skript, naformátujte ho a prečítajte si, čo zbiera, ktoré domény kontaktuje a čo zapisuje do úložiska.
• Čítanie zostavených štýlov. Nástroje založené na pomocných triedach vytvárajú obrovské jednoriadkové súbory CSS. Formátovanie umožňuje sledovať kaskádu, nájsť pravidlo s prednosťou a pochopiť, prečo sa vaša úprava neuplatní.
• Skúmanie odpovede API. Dáta JSON skopírované z panela siete sú bez formátovania neprehľadné. Po úprave za pár sekúnd uvidíte štruktúru, vnorenie aj chýbajúce pole.
• Učenie sa z reálneho kódu. Čítanie toho, ako kvalitná knižnica rieši konkrétny problém, je rýchla cesta k zlepšeniu. S naformátovaným súborom je takéto čítanie oveľa pohodlnejšie.

Ako používať LFUnminify

Kód môžete do editora dostať tromi spôsobmi. Vložte ho priamo do ľavého panela, kliknite na Vybrať súbor a načítajte súbor z počítača alebo ho presuňte do vstupnej oblasti. Ak chcete skúmať súbor zo živej stránky, otvorte ho cez zobrazenie zdrojového kódu alebo vývojárske nástroje prehliadača, skopírujte obsah a vložte ho sem. Prípadne si súbor .js, .css, .html, .xml alebo .json uložte a otvorte cez Vybrať súbor.

Formátovanie sa spustí automaticky, nemusíte hľadať žiadne tlačidlo. Nástroj počká, kým prestanete písať, rozpozná jazyk a potom zobrazí upravený výsledok v pravom paneli so zvýraznenou syntaxou. Celý výstup môžete jedným kliknutím skopírovať do schránky alebo stiahnuť ako vhodne pomenovaný súbor a otvoriť vo svojom editore.

Dve drobnosti, ktoré pomáhajú pri dlhých súboroch. Zapnite čísla riadkov, keď potrebujete odkázať na presnú pozíciu alebo porovnať dve verzie vedľa seba, nastavenie si nástroj zapamätá do ďalšej návštevy. A ak rozpoznaný formát nie je ten, ktorý ste čakali, zvyčajne je to samo osebe stopa: súbor rozpoznaný ako JavaScript, hoci ste ho považovali za JSON, sa často ukáže ako odpoveď JSONP alebo konfigurácia zabalená do priradenia.

Váš kód zostáva vo vašom zariadení

Formátovanie prebieha lokálne vo vašom prehliadači pomocou kódu načítaného so stránkou. LFUnminify neposiela obsah editora na server na formátovanie, neukladá ho do databázy a na spracovanie nevyžaduje účet. Aj súbory otvorené cez Vybrať súbor alebo presunutím sa čítajú lokálne. Po načítaní potrebných súčastí stránky už formátovanie jednotlivých vstupov nevyžaduje sieťovú požiadavku.

Lokálne spracovanie je užitočné, keď chcete preskúmať interný balík, klientsky projekt alebo konfiguračný súbor bez odoslania obsahu tejto službe. Sami rozhodujete, ktoré súbory otvoríte a ktoré kópie stiahnete. Nástroj za vás nenačítava vzdialené súbory: najprv si ich sami uložte alebo skopírujte. Na používanie editora nepotrebujete účet a formátovanie nezávisí od poradia vo vzdialenom spracovateľskom systéme.

Prečo je LFUnminify zadarmo?

LFUnminify patrí do rodiny bezplatných nástrojov od Ludovica Franka spolu s generátorom hesiel, generátorom favicon, tvorbou farebných paliet a ďalšími pomôckami. Dôvod je jednoduchý: malé nástroje, po ktorých vývojári siahajú niekoľkokrát týždenne, by nemali byť skryté za registráciou, záplavou reklám ani kreditným limitom. Tento nástroj nevyžaduje účet, nemá kvóty a neponúka platené rozšírenia.

Zároveň ide o praktickú ukážku našej práce. Každý nástroj z tejto rodiny je skutočná aplikácia, ktorú vyvíjame a udržiavame rovnako ako klientske projekty. O našom prístupe to povie viac než samotné portfólio. Ak potrebujete vývoj webu na mieru, plnohodnotnú aplikáciu namiesto šablóny alebo technické poradenstvo, nájdete nás cez odkaz v pätičke.

Často kladené otázky