Maak verkleinde code online weer leesbaar

Een specifiek codeformaat opmaken

Elk formaat heeft een eigen pagina met uitleg die bij die taal hoort:

• JavaScript leesbaar makenJavaScript
• CSS leesbaar makenCSS
• HTML leesbaar makenHTML
• XML leesbaar makenXML
• JSON leesbaar makenJSON

Wat is code verkleinen?

Bij het verkleinen van code wordt tekst verwijderd die niet nodig is voor de uitvoering, zoals bepaalde spaties, regeleinden en opmerkingen. Hulpmiddelen voor JavaScript kunnen ook lokale namen inkorten en expressies herschrijven. Ontwikkelaars bewaren leesbare bronbestanden, terwijl bouwgereedschappen compacte versies maken voor verspreiding. Deze bewerkingen zijn bedoeld om het gedrag te behouden, maar hun precieze effect hangt af van de taal, het gebruikte hulpmiddel en de instellingen. Een productiebestand ziet er daardoor vaak heel anders uit dan de broncode die de auteur bewerkte.

Kleinere bestanden kunnen de hoeveelheid overgedragen gegevens beperken, vooral in combinatie met netwerkcompressie en caching. De besparing hangt af van het oorspronkelijke bestand en de bouwinstellingen; er is geen vast percentage of gegarandeerde snelheidswinst voor de pagina. De leesbaarheid gaat er wel op achteruit. Als een script of stijlblad uit één dicht opeengepakte regel bestaat, wordt het lastig een voorwaarde te volgen of een selector te vinden. Een opgemaakte kopie geeft een bruikbare indeling voor onderzoek, terwijl de oorspronkelijke build en bijbehorende leveringsinstellingen beschikbaar blijven om te vergelijken.

Wat doet dit hulpmiddel voor codeopmaak?

LFUnminify geeft compacte code een beter leesbare indeling. Het voegt inspringing toe, plaatst spaties rond blokken en operatoren en voegt regeleinden in volgens de gekozen formatter. Zo kun je geneste structuren volgen, een waarde zoeken en een functie onderzoeken zonder één lange regel te hoeven ontcijferen. Hoe de indeling verandert, hangt af van de invoer en de herkende taal. Er geldt dus geen vaste regel dat elke instructie een eigen regel krijgt.

Onder de motorkap draait Prettier, de formatter die de meeste JavaScript-teams al gebruiken, rechtstreeks in je browser. De uitvoer komt daardoor overeen met wat je eigen editor van een gewoon bronbestand zou maken, zodat het resultaat vertrouwd aanvoelt in plaats van machinaal gegenereerd. De herkenning gaat automatisch: plak wat je wilt en het hulpmiddel bepaalt of het JavaScript, CSS, HTML, XML of JSON is en maakt het vervolgens op de bijpassende manier op.

Opmaak herstelt het oorspronkelijke project niet. Namen, opmerkingen en bronbestanden die tijdens het bouwen zijn verwijderd, zijn niet terug te halen door alleen de indeling te veranderen. Bronkaarten of de oorspronkelijke repository kunnen die ontbrekende context bieden, maar dit hulpmiddel laadt ze niet en koppelt stacktraces niet aan de broncode. Het resultaat is een leesbare werkkopie voor onderzoek, met de namen en programmastructuur die nog in het aangeleverde bestand staan.

Ondersteunde codeformaten

Eén editor, vijf talen. LFUnminify leest de inhoud die je plakt, bepaalt welke taal het is en geeft die door aan de parser die voor die syntaxis is gebouwd. Je hoeft nooit een formaat uit een menu te kiezen, en een bestand met de verkeerde extensie wordt toch correct verwerkt:

• JavaScript, inclusief ES6 en nieuwere syntaxis, modules, asynchrone code en JSX. Een veelvoorkomend voorbeeld is een bundel gemaakt met webpack, Vite, esbuild of Terser.
• CSS, inclusief moderne syntaxis, aangepaste eigenschappen, mediaquery’s en geneste regels. Geschikt voor een stijlblad dat met Tailwind, Sass of PostCSS is samengesteld.
• HTML, inclusief ingesloten script- en style-blokken, die samen met de HTML-code worden opgemaakt in plaats van op één lange regel te blijven staan.
• XML, inclusief sitemaps, RSS-feeds, SVG-bestanden, SOAP-enveloppen en configuratiebestanden die zonder één enkel regeleinde zijn aangekomen.
• JSON, inclusief diep geneste API-antwoorden, pakketmanifesten, configuratiebestanden en loggegevens.

Wanneer wil je verkleinde code leesbaar maken?

Code leesbaar maken doe je zelden alleen uit nieuwsgierigheid. Meestal is het de snelste manier om een concrete vraag te beantwoorden over code van iemand anders, of over eigen code die je niet meer kunt lezen:

• Een fout in productie onderzoeken. Door een bundel op te maken worden functies en vertakkingen zichtbaar die op één regel lastig te lezen zijn. Posities in de oorspronkelijke stacktrace worden niet automatisch aan de nieuwe indeling gekoppeld; gebruik de foutopsporingshulpmiddelen van je browser en bronkaarten als die beschikbaar zijn.
• Een script van derden controleren. Maak een analysetag, chatwidget of partnerscript leesbaar voordat je het aan je website toevoegt. Bekijk welke gegevens het verzamelt, welke domeinen het benadert en wat het opslaat.
• Een samengesteld stijlblad lezen. Hulpprogrammaframeworks produceren enorme CSS-bestanden op één regel. Door die op te maken kun je de cascade volgen, de doorslaggevende regel vinden en begrijpen waarom jouw overschrijving wordt genegeerd.
• Een API-antwoord onderzoeken. JSON-gegevens die je uit het netwerktabblad kopieert, zijn vaak onleesbaar zonder opmaak. Eenmaal opgemaakt zie je de structuur, de geneste niveaus en het ontbrekende veld binnen enkele seconden.
• Leren van echte code. Bekijken hoe een goed gebouwde bibliotheek een probleem daadwerkelijk oplost, helpt je snel vooruit. Een opgemaakt bestand maakt dat een stuk prettiger.

Zo gebruik je LFUnminify

Je kunt op drie manieren code invoeren. Plak die rechtstreeks in het linkerpaneel, klik op Bladeren om een bestand van je computer te openen, of sleep een bestand naar het invoerveld. Wil je een bestand van een bestaande website onderzoeken, open het dan via de paginabron of de ontwikkelaarstools van je browser, kopieer de inhoud en plak die hier. Je kunt het .js-, .css-, .html-, .xml- of .json-bestand ook opslaan en via Bladeren openen.

Het opmaken begint vanzelf; je hoeft geen knop te zoeken. Het hulpmiddel wacht tot je stopt met typen, herkent de taal en toont het leesbaar opgemaakte resultaat in het rechterpaneel met syntaxisaccentuering. Daarna kun je de volledige uitvoer met één klik naar je klembord kopiëren of downloaden als bestand met een passende naam om het in je editor te openen.

Twee kleine dingen die helpen bij lange bestanden. Zet regelnummers aan wanneer je naar een exacte positie wilt verwijzen of twee versies naast elkaar wilt vergelijken; je voorkeur wordt voor je volgende bezoek onthouden. En als het herkende formaat niet is wat je verwachtte, is dat meestal al een aanwijzing: een bestand dat als JavaScript wordt herkend terwijl je dacht dat het JSON was, blijkt vaak een JSONP-antwoord te zijn of een configuratie die in een toewijzing is verpakt.

Je code blijft op je eigen computer

De opmaak gebeurt lokaal in je browser, met de code die samen met de pagina wordt geladen. LFUnminify uploadt je invoer niet naar een opmaakserver, bewaart die inhoud niet in een database en vereist geen account voor de verwerking. Bestanden die je via Bladeren of slepen opent, worden ook lokaal gelezen. Zodra de benodigde paginaonderdelen zijn geladen, is er geen netwerkverzoek nodig om elke nieuwe invoer op te maken.

Lokale verwerking is handig als je een interne bundel, een klantproject of een configuratiebestand wilt onderzoeken zonder de inhoud naar deze dienst te uploaden. Je houdt zelf controle over de bestanden die je opent en de kopieën die je downloadt. Het hulpmiddel haalt geen externe bestanden voor je op: sla ze eerst zelf op of kopieer de inhoud. Voor de editor is geen account nodig en de opmaak is niet afhankelijk van een wachtrij op een externe server.

Waarom is LFUnminify gratis?

LFUnminify maakt deel uit van een reeks gratis hulpmiddelen van Ludovic Frank, naast onder meer een wachtwoordgenerator, een faviconmaker en een kleurenpaletmaker. Het idee is eenvoudig: kleine hulpmiddelen die ontwikkelaars meerdere keren per week gebruiken, horen niet achter een aanmeldformulier, een muur van advertenties of een kredietlimiet te zitten. Dit hulpmiddel heeft geen account, geen quotum en geen betaalde upgrades binnen het product.

Het is ook een werkend voorbeeld van ons werk. Elk hulpmiddel in de reeks is een echte toepassing, gebouwd en onderhouden zoals we dat voor klantprojecten doen. Dat zegt meer over onze werkwijze dan een portfoliopagina. Heb je webontwikkeling op maat nodig, een volwaardige toepassing in plaats van een sjabloon, of technisch advies? Via de link onderaan de pagina kun je ons vinden.

Veelgestelde vragen