Razširite in uredite kodo na spletu

Razširite posamezno obliko kode

Vsaka oblika ima svojo stran s podrobnostmi, ki so pomembne za njen jezik:

• Razširi JavaScriptJavaScript
• Razširi CSSCSS
• Razširi HTMLHTML
• Razširi XMLXML
• Razširi JSONJSON

Kaj je minifikacija kode?

Razvijalci pišejo kodo tudi za druge razvijalce. Zato dodajajo komentarje, zamike, prazne vrstice med bloki in imena spremenljivk, ki povedo, kaj vsebujejo. Vse to pomaga ljudem, brskalniku pa ne. Minifikacija je korak pri gradnji, ki odstrani vse, česar računalnik ne potrebuje: presledke, prelome vrstic, komentarje in pogosto tudi izvirna imena spremenljivk ter funkcij, ki jih nadomesti z eno samo črko. Delovanje programa ostane povsem enako, spremeni se le njegova oblika.

Prihranek je občuten. Skrčen paket JavaScript je običajno od 30 do 70 odstotkov manjši od izvorne kode, zato se po omrežju prenese manj bajtov, prvi izris je hitrejši in kazalniki Core Web Vitals so boljši. Zato skoraj vsa produkcijska spletišča strežejo skrčene datoteke JS, CSS in HTML. Cena je datoteka v eni gosti vrstici, ki je človek skoraj ne more brati. Ko želite razumeti njeno delovanje, poiskati napako ali preveriti, kaj v resnici počne, jo morate najprej razširiti v berljivo obliko.

Kaj naredi to orodje za razširjanje kode?

LFUnminify iz skrčene kode ponovno ustvari berljivo strukturo. Obnovi zamike, postavi posamezne ukaze v svoje vrstice, razmakne bloke in operatorje ter uporabi dosledna pravila oblikovanja za zaznani jezik. Paket s štiri tisoč znaki v eni vrstici postane nekaj sto pravilno gnezdenih vrstic, po katerih se lahko premikate, iščete in sledite logiki programa.

V ozadju neposredno v vašem brskalniku deluje Prettier, oblikovalnik, ki ga uporablja večina ekip JavaScript. Rezultat zato sledi pravilom, ki bi jih vaš urejevalnik uporabil za običajno izvorno datoteko, in deluje domače. Zaznavanje je samodejno: prilepite vsebino, orodje pa ugotovi, ali gre za JavaScript, CSS, HTML, XML ali JSON, ter jo ustrezno oblikuje.

Pomembno je poznati tudi omejitev. Razširjanje kode ni dekompilacija. Komentarji, izvirna imena spremenljivk in zapiski razvijalcev so bili odstranjeni med gradnjo, zato jih nobeno orodje ne more povrniti. Dobite dobro strukturirano, berljivo kodo, po kateri se lahko premikate, kratka imena iz minifikacije pa ostanejo. V praksi to običajno zadošča za razumevanje logike, iskanje funkcije ali pregled podatkov, ki jih skript pošilja, in njihovih ciljev.

Podprte oblike kode

En urejevalnik, pet jezikov. LFUnminify prebere prilepljeno vsebino, prepozna jezik in jo preda razčlenjevalniku za ustrezno skladnjo. Oblike ni treba izbirati v meniju, pravilno pa obdela tudi datoteko z napačno končnico:

• JavaScript, vključno s skladnjo ES6 in novejših različic, moduli, asinhrono kodo in JSX. Običajen primer je paket, ustvarjen z webpack, Vite, esbuild ali Terser.
• CSS, vključno s sodobno skladnjo, lastnostmi po meri, medijskimi poizvedbami in gnezdenimi pravili. Primerno za slogovne predloge, ustvarjene s Tailwind, Sass ali PostCSS.
• HTML, vključno z vdelanimi bloki skriptov in slogov, ki se oblikujejo skupaj z oznakami in ne ostanejo v eni dolgi vrstici.
• XML, vključno z zemljevidi spletišč, viri RSS, datotekami SVG, ovojnicami SOAP in nastavitvenimi datotekami brez enega samega preloma vrstice.
• JSON, vključno z globoko gnezdenimi odgovori API, opisi paketov, nastavitvenimi datotekami in podatki iz dnevnikov.

Kdaj potrebujete orodje za razširjanje kode

Razširjanje je redko zgolj stvar radovednosti. Običajno je najhitrejša pot do odgovora na konkretno vprašanje o kodi, ki je niste napisali, ali o svoji kodi, ki je ne morete več prebrati:

• Odpravljanje napake v produkciji. Sled sklada kaže na prvo vrstico in stolpec 24815 v paketu. Oblikovanje datoteke prinese uporabne številke vrstic in omogoči iskanje funkcije, ki je dejansko sprožila napako.
• Pregled zunanjega skripta. Preden na spletišče vključite analitično oznako, pogovorni pripomoček ali partnerski skript, ga razširite in preverite, katere podatke zbira, s katerimi domenami komunicira in kaj zapisuje v shrambo.
• Branje prevedene slogovne predloge. Ogrodja s pomožnimi razredi ustvarijo ogromne datoteke CSS v eni vrstici. Oblikovanje razkrije kaskado, veljavno pravilo in razlog, zakaj vaša preglasitev nima učinka.
• Pregled odgovora API. Podatki JSON, kopirani iz omrežnega zavihka, so brez oblikovanja nepregledni. Po urejanju postanejo struktura, gnezdenje in manjkajoče polje očitni v nekaj sekundah.
• Učenje iz resnične kode. Branje načina, kako dobro zasnovana knjižnica rešuje problem, hitro izboljša znanje. Oblikovana datoteka je osnova za udobno branje takšne kode.

Kako uporabljati LFUnminify

Kodo lahko v urejevalnik vnesete na tri načine. Prilepite jo neposredno v levo podokno, kliknite Prebrskaj in izberite datoteko v računalniku ali jo povlecite na območje za vnos. Za pregled datoteke z objavljenega spletišča jo odprite v prikazu izvorne kode ali razvijalskih orodjih brskalnika, kopirajte in prilepite sem. Datoteko .js, .css, .html, .xml ali .json lahko tudi shranite in odprete z gumbom Prebrskaj.

Oblikovanje se začne samodejno, brez iskanja gumba. Orodje počaka, da nehate tipkati, prepozna jezik in prikaže urejen rezultat v desnem podoknu z označevanjem skladnje. Celoten izhod lahko z enim klikom kopirate v odložišče ali ga prenesete kot datoteko z ustreznim imenom ter odprete v svojem urejevalniku.

Pri dolgih datotekah pomagata dve malenkosti. Vključite številke vrstic, kadar morate navesti natančno mesto ali primerjati različici drugo ob drugi. Nastavitev se shrani za naslednji obisk. Če orodje zazna drugo obliko od pričakovane, je to pogosto koristen namig: datoteka, ki ste jo imeli za JSON, vendar se razčleni kot JavaScript, je lahko odgovor JSONP ali nastavitev, zavita v prireditveni izraz.

Vaša koda nikoli ne zapusti računalnika

To je dovolj pomembno, da povemo jasno. Oblikovanje poteka lokalno v vašem brskalniku s kodo JavaScript, ki se enkrat naloži skupaj s stranjo. Vaša koda se ne pošilja nikamor, ne čaka na strežniku, ne zapisuje v podatkovno zbirko in se ne beleži. Ko se stran naloži, lahko prekinete omrežno povezavo, orodje pa bo še vedno delovalo. To je najpreprostejši dokaz, da se nič ne pošilja.

Zato lahko prilepite lastniško kodo, interni paket, projekt naročnika ali nastavitveno datoteko s strukturo, ki je ne želite deliti. Nič, kar prilepite ali odprete, ne zapusti brskalnika. Orodje tudi nikoli ne pridobiva datotek v vašem imenu, zato naš strežnik ne izve, katero kodo ali spletišča pregledujete. Računa ni treba ustvariti, vsebini, ki jo prilepite, pa ne sledimo.

Zakaj je LFUnminify brezplačen?

LFUnminify je del družine brezplačnih orodij Ludovica Franka, poleg generatorja gesel, generatorja ikon spletišč, ustvarjalnika barvnih palet in drugih pripomočkov. Razlog je preprost: drobna orodja, ki jih razvijalci potrebujejo večkrat na teden, ne bi smela zahtevati prijave, prikazovanja oglasov ali porabe dobroimetja. Tukaj ni računa, kvote ali ponudb za nadgradnjo znotraj izdelka.

Orodje je tudi praktičen prikaz našega dela. Vsak pripomoček v družini je prava aplikacija, zgrajena in vzdrževana enako kot projekti za naročnike. To o našem pristopu pove več kot predstavitvena stran. Če potrebujete spletni razvoj po meri, zahtevno aplikacijo namesto predloge ali tehnično svetovanje, nas najdete prek povezave v nogi strani.

Pogosta vprašanja