Zpřehlednění JavaScriptu online
Vložte minifikovaný soubor .js, balík webpack nebo jednořádkový úryvek a v pravém panelu získáte správně odsazený JavaScript. Formátování zajišťuje Prettier přímo v prohlížeči, aniž by se cokoli někam nahrávalo.
Proč se JavaScript stává nečitelným
Mnohé postupy pro produkční sestavení minifikují JavaScript před jeho zveřejněním. Minifikátory odstraňují zbytečné mezery a komentáře a mohou zkracovat názvy nebo přepisovat výrazy. Samostatný krok může slučovat moduly do větších balíků, takže dodaný skript se může výrazně lišit od zdrojů projektu. Tyto kroky mají při přípravě kódu k doručení zachovat jeho chování, ztěžují však ruční prohlížení. Projekt s mnoha čitelnými moduly tak může dorazit jako několik hustě zapsaných balíků. Formátování odhalí strukturu, která v nich zůstala, ale nevrátí zpět úpravy provedené při sestavení.
Co formátování skutečně zpřístupní
Naformátování balíku přidá zalomení řádků, mezery a odsazení, které usnadní prohlížení zbývajícího programu. Vnořené funkce a podmíněné větve jsou viditelnější a řetězce nebo názvy koncových bodů se lépe hledají. Nová čísla řádků patří naformátované kopii: výpis zásobníku volání z minifikovaného souboru stále odkazuje na původní soubor. LFUnminify tyto pozice nepřevádí ani je nepropojuje s mapami zdrojového kódu. Naformátovaný pohled využijte k pochopení okolní logiky a přesná místa za běhu zkoumejte ladicím nástrojem prohlížeče. Dobrým výchozím bodem je výrazný řetězec z chybové zprávy nebo síťového požadavku. Najděte jej v kopii a přečtěte si okolní podmínky, místo abyste automaticky přisoudili chybu nejbližší funkci. Vygenerované pomocné funkce a běhové obálky zůstávají v balíku i po naformátování. Porovnání těchto souvislostí s původním zdrojem, je-li dostupný, poskytne spolehlivější vysvětlení než samotné odsazení.
Podpora moderní syntaxe
Formátovač rozumí současnému JavaScriptu, nejen jeho podobě před deseti lety. Podporuje šipkové funkce, třídy, async a await, generátory, volitelné řetězení, operátor pro výchozí hodnotu při null či undefined, šablonové literály, destrukturování, rozbalovací syntaxi, dynamické importy i moduly ES. Podporováno je také JSX, což se hodí při prohlížení komponenty React, která byla sestavena bez převodu této syntaxe. Protože zpracování zajišťuje Prettier, výstup dodržuje jednotné konvence, nastavení tohoto nástroje se však může lišit od nastavení vašeho editoru.
Kde jsou hranice nástroje
Formátování nevrací zpět transformace provedené při sestavení. Proměnná nazvaná n zůstane n, i když se původně jmenovala remainingRetries. Sloučené moduly zůstanou v dodaném balíku a odstraněné komentáře nelze spolehlivě odvodit. Původní repozitář nebo mapa zdrojového kódu vám mohou pomoci získat souvislosti mimo tento nástroj. Záměrně obfuskovaný kód zůstane obfuskovaný i po formátování: zakódované řetězce, umělé větve a zavádějící názvy mohou dál skrývat jeho význam. Výsledek berte jako pomůcku k prohlížení a každou úpravu ověřte ve skutečném projektu.
Časté dotazy
Lze zpřehlednit balík vytvořený pomocí webpack nebo Vite?
Ano, podporované balíky JavaScriptu lze naformátovat po vložení jejich obsahu nebo otevření místního souboru. Výstup zachová sloučený kód, neobnoví samostatné zdrojové moduly. Velké balíky mohou prohlížeč zpomalit nebo zablokovat, proto podle možností zkoumejte menší úplnou část.
Odstraňuje nástroj obfuskaci JavaScriptu?
Dokáže naformátovat podporovanou syntaxi JavaScriptu v obfuskovaném souboru, obfuskaci však neodstraní. Zakódované řetězce, umělý tok řízení a záměrně zavádějící názvy zůstávají. Odsazení může usnadnit zkoumání těchto struktur, samotné čitelné rozložení však neprokazuje, co skript dělá ani zda je důvěryhodný.
Může formátování poškodit můj kód?
Cílem formátovače je zachovat chování JavaScriptu při zavedení jednotného stylu. Může změnit interpunkci, uvozovky i rozložení, takže výsledek není totožná kopie po jednotlivých bajtech. Ponechte si originál, zkontrolujte výstup a před nasazením upraveného nebo naformátovaného balíku do produkce spusťte testy projektu.