Tömörített kód olvashatóvá tétele online
Illessz be tömörített JavaScript-, CSS-, HTML-, XML- vagy JSON-kódot, és kapj jól tagolt, olvasható eredményt. Ingyenes, azonnali, teljesen a böngésződben fut.
Kódformázás adott formátumhoz
Minden formátumnak külön oldala van, az adott nyelvhez fontos tudnivalókkal:
Mi a kód minifikálása?
A fejlesztők más fejlesztők számára is írják a kódot. Ez megjegyzéseket, behúzásokat, a blokkok közötti üres sorokat és beszédes változóneveket jelent. Mindez az emberi olvasót segíti, a böngészőnek viszont nincs rá szüksége. A minifikálás a build azon lépése, amely eltávolítja a gép számára felesleges részeket: a szóközöket, sortöréseket és megjegyzéseket. Gyakran a változók és függvények eredeti nevét is egyetlen betűre cseréli. A program működése változatlan marad, csak a megjelenése alakul át.
A nyereség jelentős. Egy minifikált JavaScript-csomag rendszerint 30 és 70 százalék közötti mértékben kisebb a forrásánál. Így kevesebb bájtot kell továbbítani, gyorsabb az első megjelenítés, és kedvezőbbek lehetnek a Core Web Vitals mutatói. Ezért szinte minden éles webhely tömörített JS-, CSS- és HTML-fájlokat szolgál ki. Ennek ára, hogy a letöltött fájl gyakran egyetlen sűrű, olvashatatlan sor. Ha meg akarod érteni, hibát keresnél benne vagy ellenőriznéd a működését, előbb újra olvashatóvá kell formáznod.
Mit csinál ez a kódformázó?
Az LFUnminify olvasható szerkezetet épít a tömörített kód köré. Visszaállítja a behúzásokat, külön sorokba rendezi az utasításokat, tagolja a blokkokat és operátorokat, majd a felismert nyelvnek megfelelő, következetes formázást alkalmaz. Egy négyezer karakteres sorból több száz, megfelelően egymásba ágyazott sor lehet, amelyben már könnyű görgetni, keresni és követni a logikát.
A háttérben a legtöbb JavaScript-csapat által is használt Prettier fut, közvetlenül a böngésződben. A kimenet így hasonló ahhoz, amit a saját szerkesztőd készítene egy szokásos forrásfájlból. Az eredmény ismerős és következetes lesz. A felismerés automatikus: a beillesztett tartalom alapján az eszköz eldönti, hogy JavaScript, CSS, HTML, XML vagy JSON került a szerkesztőbe, és annak megfelelően formázza.
Egy korlátot érdemes tisztán látni: a formázás nem visszafejtés. A megjegyzések, eredeti változónevek és fejlesztői feljegyzések a build során eltűntek, és ezeket semmilyen eszköz nem tudja visszahozni. Jól tagolt, olvasható és bejárható kódot kapsz, de a minifikáló által adott rövid nevek megmaradnak. Ez a gyakorlatban általában elegendő a logika követéséhez, egy függvény megtalálásához vagy annak megértéséhez, hogy egy szkript milyen adatot hová küld.
Támogatott kódformátumok
Egy szerkesztő, öt nyelv. Az LFUnminify megvizsgálja a beillesztett tartalmat, felismeri a nyelvet, majd a megfelelő szintaktikai elemzőnek adja át. Nem kell menüből formátumot választanod, és a hibás fájlkiterjesztés sem akadály:
- JavaScript, beleértve az ES6 és újabb szintaxist, a modulokat, az aszinkron kódot és a JSX-et. Tipikus bemenet egy webpack, Vite, esbuild vagy Terser által készített csomag.
- CSS, modern szintaxissal, egyéni tulajdonságokkal, médialekérdezésekkel és beágyazott szabályokkal. Tailwind, Sass vagy PostCSS által előállított stíluslapokhoz is ideális.
- HTML, a beágyazott script- és style-blokkokkal együtt. Ezeket a jelölőkód részeként formázza, így nem maradnak egyetlen hosszú sorban.
- XML, beleértve a webhelytérképeket, RSS-hírcsatornákat, SVG-fájlokat, SOAP-borítékokat és sortörések nélkül érkező konfigurációs fájlokat.
- JSON, mélyen beágyazott API-válaszokkal, csomagleírókkal, konfigurációs fájlokkal és naplóbejegyzések adataival.
Mikor van szükséged kódformázóra?
A tömörített kód olvashatóvá tétele ritkán puszta kíváncsiság. Általában ez a leggyorsabb módja egy konkrét kérdés megválaszolásának olyan kódról, amelyet más írt, vagy amelyet te írtál, de már nehéz elolvasni:
- Éles környezetben jelentkező hiba keresése. A veremnyom egy csomag első sorának 24815. oszlopára mutat. Formázás után valódi sorok között keresheted meg a hibát kiváltó függvényt.
- Külső szkript ellenőrzése. Mielőtt analitikai címkét, csevegőmodult vagy partnerprogramhoz tartozó szkriptet építesz be, formázd meg, és nézd meg, mit gyűjt, mely domaineket éri el, és mit ír a tárolóba.
- Lefordított stíluslap olvasása. A segédosztályokra épülő keretrendszerek hatalmas, egysoros CSS-fájlokat készítenek. Formázva követhető a kaszkád, megtalálható az érvényesülő szabály, és kiderül, miért nem hat a felülírásod.
- API-válasz vizsgálata. A hálózati panelről másolt JSON-adatcsomag formázás nélkül nehezen olvasható. Behúzásokkal a szerkezet, a beágyazások és a hiányzó mező néhány másodperc alatt láthatóvá válik.
- Tanulás valódi kódból. Sokat lehet fejlődni abból, ha elolvasod, hogyan old meg egy feladatot egy jól megírt könyvtár. Ehhez a formázott fájl kényelmes kiindulópont.
Az LFUnminify használata
Háromféleképpen vihetsz kódot a szerkesztőbe. Illeszd közvetlenül a bal oldali panelbe, kattints a Tallózás gombra egy helyi fájl megnyitásához, vagy húzd a fájlt a beviteli területre. Egy működő webhely fájljának vizsgálatához nyisd meg a forrásnézetben vagy a böngésző fejlesztői eszközeiben, másold ki, és illeszd ide. A .js, .css, .html, .xml vagy .json fájlt le is mentheted, majd megnyithatod a Tallózás gombbal.
A formázás magától elindul, nem kell hozzá külön gombot keresni. Az eszköz megvárja, amíg befejezed a gépelést, felismeri a nyelvet, majd a jobb oldali panelen szintaxiskiemeléssel jeleníti meg az eredményt. Innen egyetlen kattintással a vágólapra másolhatod a teljes kimenetet, vagy megfelelő nevű fájlként letöltheted, hogy a saját szerkesztődben folytasd a munkát.
Hosszú fájloknál két apróság segíthet. Kapcsold be a sorszámokat, ha pontos helyre hivatkoznál vagy két változatot hasonlítanál össze; ezt a beállítást a következő látogatásra is megjegyzi az eszköz. Ha pedig más formátumot ismer fel, mint amire számítottál, az önmagában is nyom lehet. A JSON-nak hitt, de JavaScriptként értelmezhető fájl gyakran JSONP-válasz vagy értékadásba csomagolt konfiguráció.
A kódod nem hagyja el a gépedet
Ezt fontos egyértelműen kimondani: a formázás helyben, a böngésződben történik, az oldallal egyszer betöltött JavaScript segítségével. A kódot nem töltjük fel, nem állítjuk szerveroldali várólistára, nem írjuk adatbázisba, és sehol sem naplózzuk. Az oldal betöltése után megszakíthatod az internetkapcsolatot, a formázó tovább működik. Ez a legegyszerűbb bizonyíték arra, hogy semmit sem küld el.
Így saját tulajdonú kódot, belső csomagot, ügyfélprojektet vagy olyan konfigurációt is beilleszthetsz, amelynek szerkezetét nem szeretnéd megosztani. A beillesztett és megnyitott tartalom a böngésződben marad. Az eszköz a nevedben sem tölt le fájlokat, ezért szerverünk azt sem tudja meg, milyen kódot vagy webhelyet vizsgálsz. Nem kell fiókot létrehoznod, és a beillesztett tartalmat sem követjük.
Miért ingyenes az LFUnminify?
Az LFUnminify Ludovic Frank ingyenes eszközcsaládjának része, egy jelszógenerátor, egy favikongenerátor, egy színpaletta-készítő és több más segédprogram mellett. Az elv egyszerű: a fejlesztők által hetente többször használt kis eszközöket ne zárja el regisztráció, reklámfal vagy kreditkeret. Itt nincs fiók, felhasználási kvóta vagy a termékben megjelenő fizetős ajánlat.
Egyúttal működő bemutató is. Az eszközcsalád minden tagja valódi alkalmazás, amelyet ugyanazzal a gondossággal készítünk és tartunk karban, mint az ügyfélprojekteket. Ez többet mond a munkánkról, mint egy portfólióoldal. Ha egyedi webfejlesztésre, sablon helyett komoly alkalmazásra vagy műszaki tanácsadásra van szükséged, a láblécben található hivatkozáson érhetsz el minket.
Gyakori kérdések
Visszaállítható az eredeti forráskód egy tömörített fájlból?
Nem teljes egészében; az ellenkezőjét ígérő eszközökkel érdemes óvatosnak lenni. A minifikálás végleg törli a megjegyzéseket, és általában egybetűsre rövidíti a változóneveket, így ezek az információk már nincsenek a fájlban. Az LFUnminify a szerkezetet, behúzásokat és sortöréseket állítja helyre, így a kód újra olvasható és bejárható lesz, de nem találhatja ki a törölt neveket és megjegyzéseket. A valódi eredeti forráshoz csak a csomag mellett közzétett source map vezethet vissza.
Elküldi a kódomat egy szerverre?
Nem. A formázást teljes egészében a böngésződ végzi, az oldallal együtt betöltött JavaScript használatával. Semmit nem töltünk fel, tárolunk vagy naplózunk. Szerverünk a nevedben sem kér le fájlokat. Ha egy webhely fájlját szeretnéd ellenőrizni, te másolod ki vagy mented le, majd itt megnyitod, így a teljes folyamat nálad és a böngésződben marad.
Milyen formátumokat támogat?
JavaScript, CSS, HTML, XML és JSON formátumokat. A felismerés a tartalom alapján automatikus, ezért nincs szükség kézi választásra. Minden nyelvet a hozzá készült elemző kezel. JavaScriptnél a modern szintaxis, az ES-modulok és a JSX is támogatott, CSS-nél az egyéni tulajdonságok és beágyazott szabályok, XML-nél pedig a webhelytérképektől és RSS-hírcsatornáktól az SVG-fájlokig sokféle dokumentum.
Van méretkorlát?
A beillesztett tartalomnak nincs rögzített méretkorlátja, de a nagyon nagy fájlok feldolgozása tovább tart, mert a munka a saját processzorodon történik. Néhány megabájtos csomagok egy átlagos laptopon kényelmesen formázhatók. A Tallózás gombbal megnyitott vagy behúzott fájlokra ugyanez érvényes, hiszen azokat is helyben olvassa be az eszköz, feltöltés nélkül.
Mi a különbség a tömörítés feloldása és a kód szépítése között?
A gyakorlatban ugyanazt a műveletet jelölik, és ez az eszköz egyszerre végzi el mindkettőt. Az unminify általában a build során összetömörített fájl olvashatóvá tételét jelenti, a beautify pedig bármilyen kód következetes stílusú újraformázását. Mivel az LFUnminify a Prettiert használja, olyan rosszul behúzott kód rendbetételére is alkalmas, amelyet korábban sosem minifikáltak.
Használható obfuszkált JavaScripttel?
Formázni lehet vele, és ez gyakran hasznos első lépés, de a formázás nem szünteti meg az obfuszkálást. Az ilyen eszközök a minifikálásnál tovább mennek: karakterláncokat kódolnak, feldarabolják a vezérlési folyamatot, és szándékosan holt kódot illesztenek be. A formázás olvasható szerkezetet ad, amelyben könnyebb követni a logikát, de a szándékos megtévesztés megmarad.