Išskleiskite ir formatuokite kodą internete
Įklijuokite sutankintą JavaScript, CSS, HTML, XML ar JSON kodą ir gaukite skaitomą rezultatą su įtraukomis. Nemokamai, iškart ir tik jūsų naršyklėje.
Pasirinkto formato kodo išskleidimas
Kiekvienam formatui skirtas atskiras puslapis su tai kalbai svarbia informacija:
Kas yra kodo sutankinimas?
Programuotojai rašo kodą kitiems programuotojams. Todėl jame būna komentarų, įtraukų, tuščių eilučių tarp blokų ir kintamųjų pavadinimų, kurie paaiškina saugomas reikšmes. Visa tai padeda žmogui, tačiau naršyklei nereikalinga. Sutankinimas yra projekto parengimo etapas, per kurį pašalinama tai, ko nereikia kompiuteriui: tarpai, eilučių lūžiai, komentarai, o labai dažnai ir pirminiai kintamųjų bei funkcijų pavadinimai, pakeičiami viena raide. Programos veikimas išlieka toks pat, pasikeičia tik jos užrašymo forma.
Nauda apčiuopiama. Sutankintas JavaScript rinkinys dažnai būna 30–70 procentų mažesnis už pirminį kodą. Tinklu perduodama mažiau baitų, puslapis greičiau parodomas pirmą kartą ir gerėja Core Web Vitals rodikliai. Todėl beveik visos veikiančios svetainės pateikia sutankintą JS, CSS ir HTML. Tačiau iš svetainės atsisiųstas failas tampa viena tankia, žmogui sunkiai skaitoma eilute. Norint jį suprasti, ieškoti klaidų ar patikrinti, ką jis iš tikrųjų daro, pirmiausia tenka išskleisti kodą.
Ką daro šis kodo išskleidimo įrankis?
LFUnminify atkuria skaitomą sutankinto kodo struktūrą. Įrankis sudeda įtraukas, kiekvieną instrukciją perkelia į atskirą eilutę, atskiria blokus ir operatorius bei pritaiko aptiktai kalbai tinkamas nuoseklias formatavimo taisykles. Keturių tūkstančių ženklų eilutė virsta keliais šimtais tvarkingai įdėtų eilučių, kurias galima peržiūrėti, jose ieškoti ir suprasti programos logiką.
Tam tiesiog jūsų naršyklėje veikia Prettier, formatavimo įrankis, kurį jau naudoja daugelis JavaScript komandų. Todėl rezultatas panašus į tą, kurį jūsų redaktorius sukurtų įprastam pirminio kodo failui, ir atrodo pažįstamas. Kalba nustatoma automatiškai: įklijuokite turinį, o įrankis atpažins JavaScript, CSS, HTML, XML arba JSON ir atitinkamai jį suformatuos.
Svarbu iškart suprasti vieną ribą. Kodo išskleidimas nėra dekompiliavimas. Komentarai, pirminiai kintamųjų pavadinimai ir programuotojo pastabos buvo pašalinti rengiant projektą, todėl joks įrankis jų nebegali sugrąžinti. Gaunate aiškiai struktūruotą, skaitomą kodą, kuriame tebėra sutankinimo įrankio sutrumpinti vardai. Praktikoje to pakanka sekti logiką, surasti funkciją arba pastebėti, kokius duomenis ir kur siunčia scenarijus.
Palaikomi kodo formatai
Vienas redaktorius, penkios kalbos. LFUnminify perskaito įklijuotą turinį, nustato jo kalbą ir perduoda tai sintaksei skirtam analizatoriui. Nereikia pasirinkti formato meniu, o net neteisingą plėtinį turintis failas apdorojamas pagal tikrąjį turinį:
- JavaScript, įskaitant ES6 ir naujesnę sintaksę, modulius, asinchroninį kodą ir JSX. Dažniausias pavyzdys yra webpack, Vite, esbuild ar Terser sukurtas rinkinys.
- CSS, įskaitant šiuolaikinę sintaksę, pasirinktines savybes, medijos užklausas ir įdėtines taisykles. Tinka Tailwind, Sass ar PostCSS parengtoms stilių lentelėms.
- HTML, įskaitant įterptus script ir style blokus, kurie formatuojami kartu su žymėjimu, užuot likę viena ilga eilute.
- XML, įskaitant svetainių schemas, RSS kanalus, SVG failus, SOAP pranešimus ir konfigūracijos failus be jokių eilučių lūžių.
- JSON, įskaitant giliai įdėtus API atsakymus, paketų aprašus, konfigūracijos failus ir žurnalų duomenis.
Kada prireikia išskleisti kodą?
Kodas retai išskleidžiamas vien iš smalsumo. Dažniausiai tai greičiausias būdas atsakyti į konkretų klausimą apie svetimą kodą arba savo kodą, kurio jau nebeįmanoma patogiai perskaityti:
- Klaidos paieška veikiančioje sistemoje. Iškvietimų seka rodo rinkinio 1 eilutės 24815 stulpelį. Suformatavę failą gaunate tikrus eilučių numerius ir galite surasti klaidą sukėlusią funkciją.
- Trečiosios šalies scenarijaus patikra. Prieš pridėdami analitikos žymą, pokalbių valdiklį ar partnerių scenarijų, išskleiskite jį ir patikrinkite, kokius duomenis jis renka, į kokius domenus kreipiasi ir ką įrašo naršyklės saugykloje.
- Sukompiliuotos stilių lentelės skaitymas. Pagalbinių klasių sistemos sukuria milžiniškus vienos eilutės CSS failus. Suformatavę matysite kaskadą, rasite viršesnę taisyklę ir suprasite, kodėl jūsų pakeitimas ignoruojamas.
- API atsakymo nagrinėjimas. Iš tinklo kortelės nukopijuotus JSON duomenis sunku skaityti, kol jie nesuformatuoti. Sutvarkius iškart išryškėja struktūra, įdėjimo lygiai ir trūkstamas laukas.
- Mokymasis iš tikro kodo. Skaitydami, kaip gerai sukurta biblioteka sprendžia problemą, greitai tobulėjate. Suformatuotas failas leidžia tokį kodą nagrinėti patogiai.
Kaip naudoti LFUnminify
Kodą į redaktorių galite įkelti trimis būdais. Įklijuokite jį kairiajame skydelyje, spustelėkite „Pasirinkti failą“ ir atverkite failą iš kompiuterio arba nuvilkite failą į įvesties sritį. Norėdami patikrinti veikiančios svetainės išteklių, atverkite jį per view-source ar naršyklės DevTools, nukopijuokite ir įklijuokite čia. Taip pat galite išsaugoti .js, .css, .html, .xml ar .json failą ir atverti jį failo pasirinkimo mygtuku.
Formatavimas prasideda automatiškai, nereikia ieškoti paleidimo mygtuko. Įrankis palaukia, kol baigsite rašyti, aptinka kalbą ir dešiniajame skydelyje parodo sutvarkytą rezultatą su sintaksės paryškinimu. Tuomet vienu spustelėjimu galite nukopijuoti visą rezultatą į iškarpinę arba atsisiųsti tinkamai pavadintą failą ir atverti savo redaktoriuje.
Dirbant su ilgais failais praverčia dvi smulkmenos. Įjunkite eilučių numerius, jei reikia nurodyti tikslią vietą ar palyginti versijas. Šis pasirinkimas bus prisimintas kitą kartą. Jei aptiktas formatas skiriasi nuo lauktojo, tai dažnai yra užuomina: failas, atpažintas kaip JavaScript, nors tikėjotės JSON, neretai būna JSONP atsakymas arba konfigūracija, įrašyta priskyrimo sakinyje.
Jūsų kodas niekada nepalieka kompiuterio
Tai verta pasakyti aiškiai. Formatavimas vyksta vietoje, jūsų naršyklėje, naudojant kartu su puslapiu vieną kartą įkeltą JavaScript. Jūsų kodas nesiunčiamas, nestatomas į serverio eilę, neįrašomas į duomenų bazę ir nefiksuojamas žurnaluose. Kai puslapis įkeltas, galite atjungti internetą, o įrankis ir toliau veiks. Tai paprasčiausias įrodymas, kad duomenys niekur neperduodami.
Todėl galite įklijuoti uždarą pirminį kodą, vidinį rinkinį, kliento projektą ar konfigūracijos failą, kurio struktūros nenorite atskleisti. Joks įklijuotas ar atvertas turinys nepalieka naršyklės. Įrankis taip pat neatsiunčia failų jūsų vardu, tad mūsų serveris nesužino, kokį kodą ar svetaines nagrinėjate. Nereikia kurti paskyros, o įklijuotas turinys nėra sekamas.
Kodėl LFUnminify nemokamas?
LFUnminify priklauso Ludovic Frank kuriamų nemokamų įrankių šeimai kartu su slaptažodžių generatoriumi, svetainės piktogramų generatoriumi, spalvų palečių kūrimo įrankiu ir kitomis priemonėmis. Mintis paprasta: nedideli įrankiai, kurių programuotojams reikia kelis kartus per savaitę, neturėtų būti paslėpti už registracijos, reklamų ar naudojimo kvotų. Čia nėra paskyros, kvotų ar siūlymų pereiti prie mokamos versijos.
Tai kartu ir veikiantis mūsų darbo pavyzdys. Kiekvienas šeimos įrankis yra tikra programa, kuriama ir prižiūrima taip pat kaip klientų projektai. Apie darbo kokybę tai pasako daugiau nei darbų aplanko puslapis. Jei reikia individualaus svetainių kūrimo, išsamios programos ar techninės konsultacijos, susisiekti galite per puslapio apačioje esančią nuorodą.
Dažniausiai užduodami klausimai
Ar galima atkurti pirminį kodą iš sutankinto failo?
Ne visą, todėl atsargiai vertinkite įrankius, kurie žada priešingai. Sutankinant komentarai pašalinami visam laikui, o kintamieji paprastai pervadinami viena raide. Šios informacijos faile nebelieka. LFUnminify atkuria struktūrą, įtraukas ir eilučių lūžius, kad kodą vėl būtų galima skaityti bei nagrinėti, tačiau negali išgalvoti pašalintų vardų ar komentarų. Jei kartu su rinkiniu paskelbtas šaltinio atvaizdis (source map), tik jis leidžia grįžti prie tikrojo originalo.
Ar mano kodas siunčiamas į serverį?
Ne. Formatavimas vyksta tik jūsų naršyklėje, naudojant kartu su puslapiu įkeltą JavaScript. Niekas neįkeliama, nesaugoma ir nefiksuojama žurnaluose. Mūsų serveris taip pat nieko neatsiunčia jūsų vardu. Norėdami patikrinti svetainės failą, jį patys nukopijuojate ar išsaugote ir atveriate čia, todėl visas darbas vyksta jūsų naršyklėje.
Kokie formatai palaikomi?
JavaScript, CSS, HTML, XML ir JSON. Formatas automatiškai aptinkamas iš turinio, todėl jo pasirinkti nereikia. Kiekvieną kalbą apdoroja jai skirtas analizatorius. JavaScript palaikoma šiuolaikinė sintaksė, įskaitant ES modulius ir JSX, CSS palaikomos pasirinktinės savybės bei įdėtinės taisyklės, o XML tinka tiek svetainių schemoms ir RSS kanalams, tiek SVG failams.
Ar ribojamas failo dydis?
Griežtos įklijuoto turinio dydžio ribos nėra, tačiau labai dideli failai užtrunka ilgiau, nes darbą atlieka jūsų procesorius, o ne serveris. Kelių megabaitų rinkiniai įprastame nešiojamajame kompiuteryje formatuojami be sunkumų. Ta pati taisyklė galioja pasirinktiems ar į įvesties sritį nuvilktiems failams, nes jie skaitomi vietoje ir niekur nesiunčiami.
Kuo kodo išskleidimas skiriasi nuo formatavimo?
Praktiškai abu pavadinimai apibūdina tą pačią operaciją, ir šis įrankis atlieka abu veiksmus iškart. Išskleidimas paprastai reiškia sutankinimo padarinių panaikinimą, o formatavimas yra bet kokio kodo sutvarkymas pagal nuoseklias stiliaus taisykles. Kadangi LFUnminify naudoja Prettier, galite juo tvarkyti ir netaisyklingas įtraukas turintį kodą, kuris niekada nebuvo sutankintas.
Ar galima formatuoti tyčia supainiotą JavaScript kodą?
Taip, ir tai dažnai naudinga pradžia, tačiau formatavimas nepašalina tyčinio kodo painiojimo. Tokie įrankiai daro daugiau nei sutankinimo priemonės: koduoja eilutes, skaido valdymo srautą ir tyčia prideda nenaudojamo kodo. Suformatuotas failas įgauna skaitomą struktūrą, todėl lengviau sekti logiką, tačiau sąmoningai įterptos klaidinančios konstrukcijos išlieka.