Gør minificeret kode læsbar og pæn online

Gør et bestemt kodeformat læsbart

Hvert format har sin egen side med de detaljer, der er relevante for netop det sprog:

• Gør JavaScript læsbartJavaScript
• Gør CSS læsbartCSS
• Gør HTML læsbartHTML
• Gør XML læsbartXML
• Gør JSON læsbartJSON

Hvad er minificering af kode?

Udviklere skriver kode, som andre udviklere skal kunne læse. Derfor bruger de kommentarer, indrykning, tomme linjer mellem blokke og variabelnavne, der forklarer indholdet. Alt dette hjælper mennesker, men gør ingen forskel for browseren. Minificering er det byggetrin, der fjerner det, maskinen ikke behøver: mellemrum, linjeskift, kommentarer og ofte også de oprindelige variabel- og funktionsnavne, som erstattes med enkelte bogstaver. Programmet opfører sig præcis som før, men koden får en anden form.

Gevinsten er mærkbar. En minificeret JavaScript-pakke er ofte 30 til 70 procent mindre end kildekoden. Det betyder færre byte over netværket, hurtigere første visning og bedre Core Web Vitals. Derfor leverer næsten alle produktionswebsteder minificeret JS, CSS og HTML. Ulempen er, at filen fra et aktivt websted bliver én tæt linje, som ingen kan læse. Hvis du vil forstå filen, fejlfinde den eller undersøge, hvad den faktisk gør, skal du først gøre den læsbar igen.

Hvad gør dette værktøj ved minificeret kode?

LFUnminify tager minificeret kode og giver den en læsbar struktur. Værktøjet genskaber indrykning, placerer hver instruktion på sin egen linje, indsætter afstand omkring blokke og operatorer og anvender ensartede formateringsregler for det registrerede sprog. En pakke på fire tusind tegn på én linje bliver til flere hundrede korrekt indrykkede linjer, som du kan gennemse, søge i og forstå.

Bag kulissen kører Prettier, den formatter som mange JavaScript-teams allerede bruger, direkte i din browser. Resultatet følger derfor de samme regler som din egen editor på en almindelig kildefil og føles velkendt. Registreringen sker automatisk: Indsæt kode, så finder værktøjet ud af, om den er JavaScript, CSS, HTML, XML eller JSON, før det formaterer den med den rigtige parser.

Der er en vigtig begrænsning: At gøre minificeret kode læsbar er ikke det samme som at dekompilere. Kommentarer, oprindelige variabelnavne og udviklernoter blev slettet under bygningen, og intet værktøj kan genskabe dem. Du får velstruktureret kode, som er nem at læse og navigere i, men med minificeringens korte navne bevaret. Det er normalt nok til at følge logikken, finde en funktion eller se, hvilke data et script sender og hvorhen.

Understøttede kodeformater

Én editor, fem sprog. LFUnminify læser det indhold, du indsætter, genkender sproget og sender det videre til parseren for den pågældende syntaks. Du behøver ikke vælge format i en menu, og en forkert filendelse forhindrer ikke korrekt behandling:

• JavaScript med ES6 og nyere syntaks, moduler, asynkron kode og JSX. Typisk en pakke bygget med webpack, Vite, esbuild eller Terser.
• CSS med moderne syntaks, brugerdefinerede egenskaber, media queries og indlejrede regler. Velegnet til typografi kompileret med Tailwind, Sass eller PostCSS.
• HTML med indlejrede script- og style-blokke, som formateres sammen med markuppen i stedet for at blive stående på én lang linje.
• XML, herunder sitemaps, RSS-feeds, SVG-filer, SOAP-meddelelser og konfigurationsfiler leveret helt uden linjeskift.
• JSON, herunder dybt indlejrede API-svar, pakkemanifester, konfigurationsfiler og strukturerede logdata.

Hvornår har du brug for læsbar kode?

At gøre kode læsbar handler sjældent kun om nysgerrighed. Det er ofte den hurtigste vej til at besvare et konkret spørgsmål om kode, du ikke selv har skrevet, eller kode, du skrev, men ikke længere kan læse:

• Fejlfinding i produktion. Staksporet peger på linje 1, kolonne 24815 i en kodepakke. Formatering giver dig rigtige linjenumre og hjælper dig med at finde den funktion, der faktisk udløste fejlen.
• Gennemgang af et tredjepartsscript. Før du tilføjer analyseværktøjer, en chatwidget eller et affiliatescript, kan du gøre koden læsbar og se, hvad den indsamler, hvilke domæner den kontakter, og hvad den gemmer lokalt.
• Læsning af kompileret CSS. Utility-frameworks producerer enorme CSS-filer på én linje. Formatering gør kaskaden synlig, så du kan finde den regel, der vinder, og forstå, hvorfor din tilsidesættelse ignoreres.
• Undersøgelse af et API-svar. JSON kopieret fra netværksfanen er svært at læse, før det formateres. Bagefter bliver struktur, indlejring og det manglende felt tydelige på få sekunder.
• Læring fra rigtig kode. At læse, hvordan et gennemarbejdet bibliotek løser et problem, er en hurtig vej til at blive bedre. En formateret fil gør det muligt at læse koden uden besvær.

Sådan bruger du LFUnminify

Du kan få kode ind i editoren på tre måder: Indsæt den direkte i venstre panel, klik på Vælg fil for at åbne en lokal fil, eller træk en fil ind i inputfeltet. Vil du undersøge en fil fra et aktivt websted, skal du åbne kildevisningen eller browserens udviklerværktøjer, kopiere indholdet og indsætte det her. Du kan også gemme .js-, .css-, .html-, .xml- eller .json-filen og åbne den med Vælg fil.

Formateringen starter automatisk, så du behøver ikke finde en knap. Værktøjet venter, til du er færdig med at skrive, registrerer sproget og viser det formaterede resultat med syntaksfremhævning i højre panel. Herfra kan du kopiere hele resultatet til udklipsholderen med ét klik eller downloade det som en fil med et passende navn til din editor.

To små funktioner hjælper med lange filer. Slå linjenumre til, når du skal henvise til et præcist sted eller sammenligne to versioner; valget huskes til næste besøg. Hvis det registrerede format overrasker dig, kan det også være et spor: En fil, der læses som JavaScript, selv om du forventede JSON, er ofte et JSONP-svar eller en konfiguration pakket ind i en tildeling.

Din kode forlader aldrig din computer

Det er vigtigt at være helt tydelig: Formateringen foregår lokalt i din browser med JavaScript, der indlæses sammen med siden. Din kode uploades ikke, sættes ikke i kø på en server, skrives ikke i en database og bliver ikke logget. Når siden er indlæst, kan du afbryde netværksforbindelsen og fortsætte med at formatere. Det er den enkleste måde at se, at intet bliver sendt.

Du kan derfor indsætte proprietær kode, en intern kodepakke, et kundeprojekt eller en konfiguration med en struktur, du ikke vil dele. Intet af det, du indsætter eller åbner, forlader browseren. Værktøjet henter heller ikke filer på dine vegne, så vores server får ikke at vide, hvilken kode eller hvilke websteder du undersøger. Der kræves ingen konto, og indholdet, du indsætter, bliver ikke sporet.

Hvorfor er LFUnminify gratis?

LFUnminify er en del af Ludovic Franks familie af gratis værktøjer sammen med blandt andet en adgangskodegenerator, en favicon-generator og et værktøj til farvepaletter. Tanken er enkel: De små hjælpeværktøjer, som udviklere bruger flere gange om ugen, skal ikke gemmes bag tilmelding, reklamer eller kreditgrænser. Her er ingen konto, ingen kvote og ingen mersalg inde i produktet.

Det er også en demonstration i praksis. Hvert værktøj er en rigtig applikation, udviklet og vedligeholdt med samme omhu som kundeprojekter. Det fortæller mere om vores arbejde end en portfolioside. Har du brug for skræddersyet webudvikling, en gennemarbejdet applikation eller teknisk rådgivning, kan du finde os via linket i sidefoden.

Ofte stillede spørgsmål