Gjør komprimert kode lesbar på nett

Formater et bestemt kodeformat

Hvert format har sin egen side med opplysninger som er relevante for språket:

• Formater JavaScriptJavaScript
• Formater CSSCSS
• Formater HTMLHTML
• Formater XMLXML
• Formater JSONJSON

Hva er minifisering av kode?

Minifisering gjør en kodefil mindre ved å fjerne tekst som ikke er nødvendig for kjøringen, for eksempel enkelte mellomrom, linjeskift og kommentarer. Verktøy som minifiserer JavaScript, kan også forkorte lokale navn og skrive om uttrykk. Utviklere beholder lesbare kildefiler, mens byggeverktøy lager kompakte versjoner for publisering. Målet er å bevare oppførselen, men virkningen avhenger av språket, minifiseringsverktøyet og innstillingene. En fil i produksjon ser derfor ofte helt annerledes ut enn kildekoden utvikleren jobbet med.

Mindre filer kan redusere datamengden som overføres, særlig sammen med komprimering under overføring og hurtigbufring. Besparelsen avhenger av originalfilen og byggeinnstillingene. Det finnes ingen fast prosentandel eller garanti for raskere sidelasting. Ulempen er dårligere lesbarhet. Når et skript eller stilark består av én tettpakket linje, blir det vanskelig å følge en betingelse eller finne en selektor. Ved å formatere en kopi får du en oversiktlig visning å undersøke, samtidig som originalbygget og innstillingene for levering fortsatt kan brukes til sammenligning.

Hva gjør dette formateringsverktøyet?

LFUnminify gir kompakt kode et mer lesbart oppsett. Verktøyet legger til innrykk, mellomrom rundt blokker og operatorer og linjeskift etter reglene til den valgte formatereren. Resultatet gjør det lettere å følge nøstede strukturer, finne en verdi og undersøke en funksjon uten å lese én tett linje. Hvor mye oppsettet endres, avhenger av inndataene og språket som gjenkjennes. Det finnes ingen fast regel om at hver setning må stå på sin egen linje.

Under panseret kjører Prettier, formatereren de fleste JavaScript-team allerede bruker, direkte i nettleseren din. Resultatet tilsvarer derfor det din egen kodeeditor ville laget av en vanlig kildefil, så det føles kjent i stedet for maskingenerert. Gjenkjenningen er automatisk: Lim inn hva som helst, så finner verktøyet ut om det er JavaScript, CSS, HTML, XML eller JSON før det formaterer innholdet deretter.

Formatering gjenskaper ikke det opprinnelige prosjektet. Navn, kommentarer og kildefiler som ble fjernet under byggingen, kan ikke gjenopprettes bare ved å endre oppsettet. Kildekart eller det opprinnelige kodelageret kan gi manglende sammenheng, men dette verktøyet laster dem ikke inn og omregner ikke posisjoner i stakkspor. Resultatet er en lesbar arbeidskopi med navnene og programstrukturen som fortsatt finnes i filen du oppgir.

Kodeformater som støttes

Én editor, fem språk. LFUnminify leser innholdet du limer inn, finner ut hvilket språk det er, og sender det videre til parseren som er laget for den syntaksen. Du trenger aldri å velge format fra en meny, og en fil med feil filendelse håndteres likevel riktig:

• JavaScript, inkludert ES6 og nyere syntaks, moduler, asynkron kode og JSX. Et vanlig eksempel er en programpakke laget med webpack, Vite, esbuild eller Terser.
• CSS, inkludert moderne syntaks, egendefinerte egenskaper, mediespørringer og nøstede regler. Egnet for stilark kompilert med Tailwind, Sass eller PostCSS.
• HTML, inkludert innebygde script- og style-blokker, som formateres sammen med HTML-koden i stedet for å bli stående på én lang linje.
• XML, inkludert nettstedskart, RSS-strømmer, SVG-filer, SOAP-konvolutter og konfigurasjonsfiler som kom uten et eneste linjeskift.
• JSON, inkludert dypt nøstede API-svar, pakkemanifester, konfigurasjonsfiler og data fra logger.

Når du trenger å gjøre kode lesbar

Det handler sjelden bare om nysgjerrighet. Å formatere komprimert kode er ofte den raskeste måten å besvare et konkret spørsmål om kode du ikke har skrevet, eller kode du skrev, men ikke lenger klarer å lese:

• Undersøke en feil i produksjon. Formatering av en programpakke synliggjør funksjoner og forgreninger som er vanskelige å lese på én linje. Posisjoner i det opprinnelige stakksporet tilpasses ikke automatisk det nye oppsettet. Bruk nettleserens feilsøkingsverktøy og kildekart når de er tilgjengelige.
• Gjennomgå et tredjepartsskript. Før du legger inn en analysetagg, en chatmodul eller et partnerskript på nettstedet, kan du formatere det og undersøke hvilke data det samler inn, hvilke domener det kontakter, og hva det lagrer.
• Lese et kompilert stilark. Rammeverk med hjelpeklasser lager store CSS-filer på én linje. Formatering gjør kaskaden synlig, hjelper deg å finne regelen som vinner, og viser hvorfor din egen overstyring blir ignorert.
• Undersøke et API-svar. JSON-data kopiert fra nettverksfanen er vanskelige å lese før de formateres. Med et ryddig oppsett blir strukturen, nøstingen og det manglende feltet synlige på sekunder.
• Lære av ekte kode. Å lese hvordan et godt utviklet bibliotek faktisk løser et problem, er en effektiv måte å bli bedre på. En formatert fil gjør det mulig å lese koden uten unødvendig strev.

Slik bruker du LFUnminify

Du kan legge inn kode på tre måter. Lim den rett inn i panelet til venstre, klikk på Velg fil for å åpne en fil fra maskinen din, eller dra og slipp en fil i inndatafeltet. Vil du undersøke en ressurs fra et publisert nettsted, åpner du den via sidekilden eller nettleserens utviklerverktøy, kopierer innholdet og limer det inn her. Du kan også lagre .js-, .css-, .html-, .xml- eller .json-filen og åpne den med Velg fil.

Formateringen starter automatisk, så du trenger ikke lete etter en knapp. Verktøyet venter til du slutter å skrive, gjenkjenner språket og viser det formaterte resultatet med syntaksutheving i panelet til høyre. Derfra kan du kopiere hele resultatet til utklippstavlen med ett klikk, eller laste det ned som en fil med passende navn og åpne den i kodeeditoren din.

To små ting som hjelper i lange filer. Slå på linjenumre når du trenger å vise til et nøyaktig sted eller sammenligne to versjoner side om side, innstillingen huskes til neste besøk. Og hvis formatet som ble gjenkjent, ikke er det du forventet, er det som regel et hint i seg selv: En fil som gjenkjennes som JavaScript når du trodde den var JSON, viser seg ofte å være et JSONP-svar eller en konfigurasjon pakket inn i en tilordning.

Koden din forlater aldri maskinen din

Formateringen kjører lokalt i nettleseren med koden som lastes inn sammen med siden. LFUnminify laster ikke innholdet fra editoren opp til en formateringstjener, lagrer det ikke i en database og krever ingen konto for å behandle det. Filer som åpnes med Velg fil eller dra og slipp, leses også lokalt. Når de nødvendige sideressursene er lastet inn, trengs ingen nettverksforespørsel for å formatere nye inndata.

Lokal behandling er nyttig når du vil undersøke en intern programpakke, et kundeprosjekt eller en konfigurasjonsfil uten å laste innholdet opp til denne tjenesten. Du beholder kontrollen over filene du åpner, og kopiene du laster ned. Verktøyet henter ikke eksterne filer på dine vegne. Lagre eller kopier dem selv først. Du trenger ingen konto for å bruke editoren, og formateringen er ikke avhengig av en behandlingskø på en ekstern tjener.

Hvorfor er LFUnminify gratis?

LFUnminify tilhører en samling gratis verktøy laget av Ludovic Frank, sammen med blant annet en passordgenerator, en favicon-generator og et verktøy for fargepaletter. Tanken er enkel: Små nytteverktøy utviklere bruker flere ganger i uken, bør ikke skjules bak registrering, reklamevegger eller bruksgrenser. Her er det ingen konto, ingen kvote og ingen oppfordringer til å kjøpe en oppgradering inne i produktet.

Verktøyet viser også hvordan vi jobber. Hvert verktøy i samlingen er en ekte applikasjon, utviklet og vedlikeholdt på samme måte som kundeprosjekter. Det sier mer om arbeidsmåten vår enn en porteføljeside kan gjøre. Trenger du skreddersydd webutvikling, en gjennomarbeidet applikasjon fremfor en mal, eller teknisk rådgivning, finner du oss via lenken i bunnteksten.

Ofte stilte spørsmål