Gör minifierad kod läsbar på nätet

Formatera ett visst kodformat

Varje format har en egen sida med information som är relevant för just det språket:

• Formatera JavaScriptJavaScript
• Formatera CSSCSS
• Formatera HTMLHTML
• Formatera XMLXML
• Formatera JSONJSON

Vad är minifiering av kod?

Minifiering gör en kodfil mindre genom att ta bort text som inte behövs för körningen, till exempel vissa blanksteg, radbrytningar och kommentarer. Verktyg som minifierar JavaScript kan också förkorta lokala namn och skriva om uttryck. Utvecklarna behåller läsbara källfiler medan byggverktygen skapar kompakta versioner för leverans. Omvandlingarna syftar till att bevara beteendet, men de exakta effekterna beror på språket, minifieraren och dess inställningar. En produktionsfil ser därför ofta helt annorlunda ut än källkoden som författaren arbetade med.

Mindre filer kan minska mängden data som överförs, särskilt tillsammans med nätverkskomprimering och cachelagring. Besparingen varierar med ursprungsfilen och bygginställningarna. Det finns ingen bestämd procentsats eller garanterad förbättring av sidans hastighet. Nackdelen är läsbarheten. När ett skript eller en stilmall består av en enda tät rad blir det svårt att följa ett villkor eller hitta en selektor. En formaterad kopia ger en tydlig uppställning för granskning, samtidigt som det ursprungliga bygget och dess leveransinställningar finns kvar att jämföra med.

Vad gör det här verktyget med minifierad kod?

LFUnminify tar kompakt kod och ger den en mer läsbar uppställning. Det lägger till indrag, mellanrum runt block och operatorer samt radbrytningar enligt den valda formateraren. Resultatet gör det lättare att följa nästlade strukturer, söka efter ett värde och granska en funktion utan att läsa en enda tät rad. Hur mycket strukturen ändras beror på indata och det identifierade språket, inte på en fast regel om att varje sats ska få en egen rad.

Under huven körs Prettier, formateraren som de flesta JavaScript-team redan använder, direkt i din webbläsare. Resultatet motsvarar därför det som din egen kodeditor skulle ge för en vanlig källfil, så det känns bekant i stället för maskingenererat. Identifieringen är automatisk: klistra in vad som helst, så avgör verktyget om det är JavaScript, CSS, HTML, XML eller JSON innan det formaterar innehållet därefter.

Formatering återskapar inte det ursprungliga projektet. Namn, kommentarer och källfiler som tagits bort under bygget kan inte återställas enbart genom att ändra uppställningen. Källkartor, så kallade source maps, eller det ursprungliga kodarkivet kan ge den saknade informationen, men verktyget läser inte in dem och mappar inte om stackspår. Resultatet är en läsbar arbetskopia för granskning, med de namn och den programstruktur som finns kvar i den angivna filen.

Kodformat som stöds

En editor, fem språk. LFUnminify läser innehållet du klistrar in, avgör vilket språk det är och lämnar det sedan till den parser som är byggd för den syntaxen. Du behöver aldrig välja format i en meny, och en fil med fel filändelse hanteras ändå korrekt:

• JavaScript, inklusive ES6 och senare syntax, moduler, asynkron kod och JSX. Ett vanligt exempel är ett kodpaket som skapats av webpack, Vite, esbuild eller Terser.
• CSS, inklusive modern syntax, anpassade egenskaper, mediefrågor och nästlade regler. Passar bra för en stilmall som kompilerats med Tailwind, Sass eller PostCSS.
• HTML, inklusive inbäddade script- och style-block, som formateras tillsammans med HTML-koden i stället för att ligga kvar som en enda lång rad.
• XML, inklusive webbplatskartor, RSS-flöden, SVG-filer, SOAP-kuvert och konfigurationsfiler som kommit utan en enda radbrytning.
• JSON, inklusive djupt nästlade API-svar, paketmanifest, konfigurationsfiler och loggdata.

När behöver du göra minifierad kod läsbar?

Att formatera minifierad kod handlar sällan bara om nyfikenhet. Oftast är det snabbaste sättet att besvara en konkret fråga om kod du inte skrev själv, eller kod du skrev men inte längre kan läsa:

• Undersöka ett fel i produktion. När ett kodpaket formateras blir funktioner och förgreningar synliga som är svåra att läsa på en enda rad. Positionerna i ursprungliga stackspår mappas inte automatiskt till den nya uppställningen. Använd webbläsarens felsökningsverktyg och källkartor när de finns.
• Granska ett tredjepartsskript. Innan du lägger till en analystagg, en chattwidget eller ett affiliateskript på din webbplats kan du formatera det och läsa vilka data det samlar in, vilka domäner det kontaktar och vad det sparar i lagringen.
• Läsa en kompilerad stilmall. Ramverk med hjälpklasser kan skapa enorma CSS-filer på en enda rad. Formateringen låter dig se kaskaden, hitta regeln som får företräde och förstå varför din egen regel ignoreras.
• Granska ett API-svar. JSON-data som kopierats från nätverksfliken är svårlästa tills de har formaterats. Därefter framträder strukturen, nästlingen och det saknade fältet på några sekunder.
• Lära av verklig kod. Att läsa hur ett välbyggt bibliotek faktiskt löser ett problem är ett snabbt sätt att utvecklas, och en formaterad fil gör läsningen betydligt bekvämare.

Så använder du LFUnminify

Du kan lägga in kod i editorn på tre sätt. Klistra in den direkt i den vänstra panelen, klicka på Välj fil för att importera en fil från datorn eller dra och släpp en fil i inmatningsområdet. Om du vill granska en resurs från en publicerad webbplats öppnar du den via sidans källkod eller webbläsarens utvecklarverktyg, kopierar innehållet och klistrar in det här. Du kan också spara filen med ändelsen .js, .css, .html, .xml eller .json och öppna den med Välj fil.

Formateringen startar automatiskt, så du behöver inte leta efter någon knapp. Verktyget väntar tills du slutar skriva, identifierar språket och visar det formaterade resultatet med syntaxmarkering i den högra panelen. Därifrån kan du kopiera hela resultatet till urklipp med ett klick eller ladda ned det som en fil med passande namn för att öppna den i din egen kodeditor.

Två små saker som hjälper i långa filer. Slå på radnummer när du behöver hänvisa till en exakt position eller jämföra två versioner sida vid sida, inställningen sparas till nästa besök. Och om det identifierade formatet inte är det du väntade dig är det oftast en ledtråd i sig: en fil som identifieras som JavaScript när du trodde att den var JSON visar sig ofta vara ett JSONP-svar eller en konfiguration som är inlindad i en tilldelning.

Din kod lämnar aldrig din dator

Formateringen körs lokalt i din webbläsare med koden som laddas tillsammans med sidan. LFUnminify laddar inte upp innehållet i editorn till en formateringsserver, sparar det inte i en databas och kräver inget konto för bearbetningen. Filer som öppnas med Välj fil eller genom att dras och släppas läses också lokalt. När sidans nödvändiga resurser har laddats krävs ingen nätverksförfrågan för att formatera varje nytt innehåll.

Lokal bearbetning är användbar när du vill granska ett internt kodpaket, ett kundprojekt eller en konfigurationsfil utan att ladda upp innehållet till tjänsten. Du bestämmer själv vilka filer du öppnar och vilka kopior du laddar ned. Verktyget hämtar inte fjärrfiler åt dig, så spara eller kopiera dem själv först. Du behöver inget konto för att använda editorn, och formateringen är inte beroende av någon bearbetningskö på en server.

Varför är LFUnminify gratis?

LFUnminify ingår i en familj av gratisverktyg som skapats av Ludovic Frank, tillsammans med bland annat en lösenordsgenerator, en favicongenerator och ett verktyg för färgpaletter. Tanken är enkel: små hjälpverktyg som utvecklare använder flera gånger i veckan ska inte kräva registrering, en vägg av annonser eller köpta krediter. Här finns inga konton, inga användningskvoter och inga erbjudanden om uppgradering i produkten.

Det är också en praktisk demonstration av vårt arbete. Varje verktyg i familjen är en verklig applikation som byggs och underhålls på samma sätt som kundprojekt. Det säger mer om hur vi arbetar än en portfoliosida kan göra. Om du behöver skräddarsydd webbutveckling, en genomarbetad applikation snarare än en mall eller teknisk rådgivning hittar du oss via länken i sidfoten.

Vanliga frågor