Deminifică și formatează codul online

Deminifică un anumit format

Fiecare format are propria pagină, cu detaliile relevante pentru limbajul respectiv:

• Deminifică JavaScriptJavaScript
• Deminifică CSSCSS
• Deminifică HTMLHTML
• Deminifică XMLXML
• Deminifică JSONJSON

Ce este minificarea codului?

Programatorii scriu cod pentru alți programatori. Asta înseamnă comentarii, indentare, linii goale între blocuri și nume de variabile care explică ce conțin. Toate acestea îi ajută pe oameni, dar nu ajută browserul. Minificarea este etapa de compilare care elimină ceea ce nu îi este necesar mașinii: spații, sfârșituri de linie, comentarii și, foarte des, numele originale ale variabilelor și funcțiilor, înlocuite cu litere individuale. Comportamentul programului rămâne exact același, se schimbă doar forma lui.

Câștigul este real. Un pachet JavaScript minificat este adesea cu 30 până la 70 la sută mai mic decât sursa sa, ceea ce înseamnă mai puțini octeți transferați, o primă afișare mai rapidă și indicatori Core Web Vitals mai buni. De aceea aproape toate site-urile în producție livrează JS, CSS și HTML minificat. Prețul este un fișier dens, pe o singură linie, pe care nimeni nu îl poate citi confortabil. Când trebuie să îl înțelegi, să depanezi o problemă sau să verifici ce face în realitate, primul pas este deminificarea.

Ce face acest instrument de deminificare?

LFUnminify primește cod minificat și reconstruiește o structură lizibilă în jurul lui. Reface indentarea, pune instrucțiunile pe linii separate, spațiază blocurile și operatorii și aplică reguli de formatare consecvente pentru limbajul detectat. Un pachet de patru mii de caractere pe o singură linie devine câteva sute de linii corect imbricate, prin care poți naviga, căuta și urmări logica.

În spate rulează Prettier, formatorul folosit deja de multe echipe JavaScript, direct în browserul tău. Rezultatul respectă astfel convențiile pe care propriul editor le-ar aplica unui fișier sursă obișnuit și rămâne familiar. Detectarea este automată: lipești conținutul, iar instrumentul stabilește dacă este JavaScript, CSS, HTML, XML sau JSON înainte să îl formateze corespunzător.

Există o limită pe care trebuie să o precizăm de la început. Deminificarea nu este decompilare. Comentariile, numele originale ale variabilelor și notele dezvoltatorilor au fost șterse la compilare și niciun instrument nu le poate recupera din nimic. Obții cod bine structurat, lizibil și ușor de parcurs, în care numele scurte rămân. În practică, este suficient pentru a urmări logica, a găsi o funcție sau a vedea ce date trimite un script și unde.

Formate de cod acceptate

Un singur editor, cinci limbaje. LFUnminify citește conținutul lipit, identifică limbajul și îl transmite analizorului potrivit sintaxei respective. Nu trebuie să alegi un format din meniu, iar un fișier cu extensia greșită este totuși tratat corect:

• JavaScript, inclusiv sintaxa ES6 și ulterioară, module, cod asincron și JSX. Cazul obișnuit este un pachet produs de webpack, Vite, esbuild sau Terser.
• CSS, inclusiv sintaxa modernă, proprietăți personalizate, interogări media și reguli imbricate. Ideal pentru foi de stil compilate cu Tailwind, Sass sau PostCSS.
• HTML, inclusiv blocurile script și style încorporate, care sunt formatate împreună cu marcajul, în loc să rămână pe o singură linie lungă.
• XML, inclusiv sitemapuri, fluxuri RSS, fișiere SVG, mesaje SOAP și fișiere de configurare primite fără niciun sfârșit de linie.
• JSON, inclusiv răspunsuri API profund imbricate, manifeste de pachete, fișiere de configurare și date din jurnale.

Când ai nevoie de un deminificator de cod

Deminificarea ține rareori doar de curiozitate. De obicei este cea mai rapidă cale de a răspunde unei întrebări concrete despre cod scris de altcineva sau despre propriul cod pe care nu îl mai poți citi:

• Depanarea unei erori din producție. Urma stivei indică linia 1, coloana 24815 a unui pachet. Formatarea oferă numere de linie utile și te ajută să găsești funcția care a declanșat eroarea.
• Auditarea unui script extern. Înainte să adaugi pe site un serviciu de analiză, un widget de chat sau un script de afiliere, deminifică-l și verifică ce colectează, ce domenii contactează și ce scrie în stocare.
• Citirea unei foi de stil compilate. Frameworkurile utilitare generează fișiere CSS imense pe o singură linie. Formatarea face cascada vizibilă, arată ce regulă câștigă și explică de ce suprascrierea ta este ignorată.
• Inspectarea unui răspuns API. Datele JSON copiate din fila de rețea sunt greu de citit înainte de formatare. După aceea, structura, nivelurile de imbricare și câmpul lipsă devin evidente în câteva secunde.
• Învățarea din cod real. Să citești cum rezolvă efectiv o bibliotecă bine construită o problemă este o metodă rapidă de progres, iar un fișier formatat poate fi parcurs confortabil.

Cum folosești LFUnminify

Poți introduce cod în editor în trei moduri. Lipește-l direct în panoul din stânga, apasă Alege fișierul pentru a importa un fișier de pe calculator sau trage un fișier peste zona de intrare. Pentru a inspecta o resursă de pe un site public, deschide sursa sau instrumentele de dezvoltare ale browserului, copiază codul și lipește-l aici. Alternativ, salvează fișierul .js, .css, .html, .xml sau .json și deschide-l cu Alege fișierul.

Formatarea începe automat, fără să mai cauți un buton. Instrumentul așteaptă să termini de tastat, detectează limbajul și afișează rezultatul formatat în panoul din dreapta, cu evidențierea sintaxei. De acolo poți copia întregul rezultat în clipboard cu un clic sau îl poți descărca într-un fișier cu un nume potrivit, pe care să îl deschizi în editorul tău.

Două detalii ajută la fișierele lungi. Activează numerele de linie când trebuie să indici o poziție exactă sau să compari două versiuni, preferința este reținută pentru următoarea vizită. Dacă formatul detectat diferă de cel așteptat, acest lucru poate fi un indiciu: un fișier interpretat ca JavaScript deși credeai că este JSON se dovedește adesea un răspuns JSONP sau o configurație inclusă într-o atribuire.

Codul tău nu părăsește calculatorul

Acest aspect merită explicat clar. Formatarea are loc local, în browser, folosind JavaScript încărcat odată cu pagina. Codul tău nu este încărcat pe server, nu intră într-o coadă de procesare, nu este scris într-o bază de date și nu este înregistrat nicăieri. Poți întrerupe conexiunea la rețea după încărcarea paginii, iar deminificatorul continuă să funcționeze, cea mai simplă dovadă că nu trimite nimic.

Poți astfel lipi cod proprietar, un pachet intern, proiectul unui client sau un fișier de configurare a cărui structură nu vrei să o distribui. Nimic din ceea ce lipești sau deschizi nu părăsește browserul, iar instrumentul nu descarcă fișiere în numele tău. Serverul nostru nu află ce cod sau ce site-uri inspectezi. Nu ai de creat un cont, iar conținutul lipit nu este urmărit.

De ce este LFUnminify gratuit?

LFUnminify face parte dintr-o familie de instrumente gratuite create de Ludovic Frank, alături de un generator de parole, un generator de faviconuri, un creator de palete de culori și altele. Ideea este simplă: micile utilitare pe care dezvoltatorii le folosesc de mai multe ori pe săptămână nu ar trebui ascunse în spatele unui formular de înscriere, al reclamelor sau al unei limite de credite. Aici nu există cont, cotă de utilizare sau oferte de upgrade în produs.

Este și o demonstrație practică. Fiecare instrument din familie este o aplicație reală, construită și întreținută cu aceeași grijă ca proiectele clienților, ceea ce spune mai mult despre felul nostru de lucru decât o pagină de portofoliu. Dacă ai nevoie de dezvoltare web personalizată, de o aplicație serioasă sau de consultanță tehnică, ne găsești prin linkul din subsol.

Întrebări frecvente