JavaScript online leesbaar maken
Plak een verkleind .js-bestand, een webpack-bundel of een fragment op één regel en krijg netjes ingesprongen JavaScript terug in het rechterpaneel. Prettier verzorgt de opmaak in je browser, zonder iets te uploaden.
Waarom JavaScript onleesbaar wordt
Veel bouwprocessen verkleinen JavaScript voordat het naar productie gaat. Hulpmiddelen verwijderen overbodige spaties en opmerkingen en kunnen namen inkorten of expressies herschrijven. Een aparte bundelstap kan modules samenvoegen tot grotere bestanden, waardoor het geleverde script sterk kan afwijken van de projectbronnen. Deze stappen zijn bedoeld om het gedrag te behouden en de code klaar te maken voor verspreiding, maar bemoeilijken handmatig onderzoek. Een project met veel leesbare modules kan als enkele dicht opeengepakte bundels worden geleverd. Opmaak maakt de resterende structuur in die bundels zichtbaar zonder de bouwbewerkingen terug te draaien.
Wat opmaak je daadwerkelijk teruggeeft
Een bundel opmaken voegt regeleinden, spaties en inspringing toe, zodat het overgebleven programma beter te onderzoeken is. Geneste functies en voorwaardelijke vertakkingen worden zichtbaar en tekenreeksen of namen van eindpunten zijn eenvoudiger te vinden. De nieuwe regelnummers horen bij de opgemaakte kopie: een stacktrace uit het verkleinde bestand verwijst nog steeds naar dat oorspronkelijke bestand. LFUnminify vertaalt die posities niet en koppelt ze niet aan bronkaarten. Gebruik de opgemaakte weergave om de omliggende logica te begrijpen en de debugger van je browser om exacte uitvoeringsposities te onderzoeken. Een herkenbare tekenreeks uit een foutmelding of netwerkverzoek is een handig startpunt. Zoek die in de opgemaakte kopie en lees de voorwaarden eromheen, in plaats van aan te nemen dat de dichtstbijzijnde functie het probleem veroorzaakt. Gegenereerde hulpfuncties en omhullende uitvoeringscode blijven na het opmaken aanwezig. Door die context met de oorspronkelijke broncode te vergelijken, als die beschikbaar is, krijg je een betrouwbaardere verklaring dan met inspringing alleen.
Ondersteuning voor moderne syntaxis
De formatter verwerkt actuele JavaScript-syntaxis, geen beperkte verzameling van tien jaar geleden. Pijlfuncties, klassen, async en await, generatoren, optional chaining, nullish coalescing, sjabloontekenreeksen, destructurering, spread-syntaxis, dynamische imports en ES-modules worden ondersteund. Dat geldt ook voor JSX, wat nuttig is bij het bekijken van een React-component waarvan de JSX tijdens het bouwen behouden is gebleven. Omdat Prettier het werk doet, volgt de uitvoer vaste conventies, al kunnen de instellingen van dit hulpmiddel afwijken van die van je editor.
Waar de grenzen liggen
Opmaak draait de bewerkingen van een bouwproces niet terug. Een variabele met de naam n blijft n, ook als die oorspronkelijk remainingRetries heette. Samengevoegde modules blijven in de aangeleverde bundel en verwijderde opmerkingen zijn niet betrouwbaar af te leiden. De oorspronkelijke repository of een bronkaart kan buiten dit hulpmiddel helpen om context terug te vinden. Bewust verduisterde code blijft ook na het opmaken verduisterd: gecodeerde tekenreeksen, kunstmatige vertakkingen en misleidende namen kunnen de betekenis blijven verhullen. Gebruik het resultaat als hulpmiddel bij onderzoek en test wijzigingen vervolgens in het echte project.
Veelgestelde vragen
Kan ik een webpack- of Vite-bundel leesbaar maken?
Ja, ondersteunde JavaScript-bundels kun je opmaken door hun inhoud te plakken of een lokaal bestand te openen. De uitvoer behoudt de gebundelde code en herstelt geen afzonderlijke bronmodules. Grote bundels kunnen de browser vertragen of laten vastlopen. Onderzoek daarom waar mogelijk een kleiner, volledig deel.
Wordt verduisterde JavaScript ontcijferd?
Het hulpmiddel kan ondersteunde JavaScript-syntaxis in een verduisterd bestand opmaken, maar draait de verduistering niet terug. Gecodeerde tekenreeksen, kunstmatige besturingsstromen en bewust misleidende namen blijven bestaan. Inspringing kan helpen die structuren te onderzoeken, maar een leesbare indeling bewijst op zichzelf niet wat het script doet of hoe betrouwbaar het is.
Kan het mijn code beschadigen?
De formatter is bedoeld om het gedrag van JavaScript te behouden en tegelijk een vaste stijl toe te passen. Leestekens, aanhalingstekens en indeling kunnen veranderen; het resultaat is dus geen identieke kopie op byteniveau. Bewaar het origineel, controleer de uitvoer en voer je projecttests uit voordat je een bewerkte of opgemaakte bundel in productie gebruikt.