Formatator de cod
Formatați și minificați XML, HTML și CSS și minificați JavaScript, direct în browser.
Instrumente înrudite
- Instrumente JSONFormatați, minificați, reparați și validați JSON cu poziții exacte ale erorilor, parcurgeți-l ca arbore și convertiți între JSON, CSV și YAML.
- Codor / DecodorCodificați și decodați Base64, URL-uri și entități HTML și convertiți baze numerice.
- Utilitare textNumărați cuvinte și caractere, schimbați forma literelor și transformați titlurile în slug-uri URL.
Despre acest instrument
Formatator de cod înseamnă patru limbaje în spatele unui singur comutator. XML-ul este predat parserului XML propriu al browserului și reconstruit cu indentare de 2 sau 4 spații, ori minificat, păstrând comentariile (doar în ieșirea formatată) și secțiunile CDATA; un document care nu poate fi analizat returnează chiar mesajul de eroare al parserului. CSS și HTML au fiecare un mod Formatare și un mod Minificare. Formatorul CSS indentează regulile și regulile at imbricate și copiază șirurile, comentariile și valorile dintre paranteze exact așa cum au fost scrise; formatorul HTML pune elementele de tip bloc pe rânduri separate și lasă conținutul din pre, textarea, script și style octet cu octet așa cum era. Ambele sunt verificate față de intrare înainte ca rezultatul să fie afișat și returnează intrarea neatinsă în loc să afișeze o copie care nu se potrivește cu ea. Minificarea HTML expune trei reguli - eliminarea comentariilor, păstrarea comentariilor condiționate, restrângerea atributelor booleene - fiecare cu lucrul pe care îl poate strica. JavaScript are doar minificare: elimină comentariile și indentarea, dar păstrează întreruperile de linie și nu redenumește nimic. Nimic de aici nu unifică reguli, nu elimină cod nefolosit și nu redenumește identificatori, iar modul XML verifică doar că documentul este bine format - nu este validat față de o DTD sau de o schemă XSD.
Toate cele patru limbaje rulează în pagina pe care o aveți deschisă. XML-ul este analizat de DOMParser-ul integrat al browserului; formatoarele CSS și HTML și cele trei minificatoare sunt funcții obișnuite din pachetul paginii. Codul dumneavoastră nu este trimis niciodată către API-ul XGM, nu este scris în URL și nu este stocat în acest browser. Bara de adrese păstrează doar limbajul, ca ?lang=html, ?lang=css sau ?lang=js - XML este valoarea implicită și nu poartă niciun parametru - așa că un link pe care îl distribuiți deschide modul potrivit cu un câmp gol. Copierea, descărcarea și exportul JSON sunt construite din rezultatul deja afișat pe ecran. Singura cerere pe care pagina o face de la sine este evenimentul de vizualizare a paginii trimis după ce acceptați analiza, care poartă calea paginii și numele instrumentului, niciodată codul dumneavoastră.
Cum se folosește
- Deschideți instrumentul Formatator de cod.
- Lipiți sau tastați datele pe care vreți să le inspectați.
- Citiți rezultatul, calculat în browser; datele nu sunt trimise către XGM.
- Copiați rezultatul doar după ce ați verificat că arată corect.
- Folosiți instrumentele XGM înrudite dacă aveți nevoie de o imagine de diagnostic mai largă.
Întrebări frecvente
De ce formatatorul XML mi-a transformat elementele vide în etichete auto-închise?
Rezultatul este scris din arborele documentului analizat, nu din textul dumneavoastră original, iar un element fără noduri copil este scris în forma de element vid. XML 1.0 definește o etichetă deschisă urmată imediat de eticheta ei de închidere și forma auto-închisă ca fiind același element, deci nimic din document nu s-a schimbat. Un consumator care citește XML cu un parser adevărat nu va observa; unul care face potriviri pe text brut ar putea.
De ce spațierea din interiorul elementelor mele este diferită după formatare?
Nodurile de text sunt curățate la capete, iar textul format doar din spații albe dintre elemente este eliminat, așa că indentarea poate fi adăugată sau înlăturată în jurul conținutului dumneavoastră. Asta este sigur pentru documentele de date, dar nu și pentru conținutul mixt, unde spațiul dintre un cuvânt și un element inline face parte din text. Dacă spațiile albe sunt semnificative în documentul dumneavoastră, minificați-l sau lăsați-l așa cum este; secțiunile CDATA sunt copiate neschimbate în ambele cazuri.
Ce garantează minificatorul JavaScript și ce nu garantează?
Elimină comentariile și indentarea, dar păstrează fiecare sfârșit de rând, așa că inserarea automată a punctului și virgulei se rezolvă exact ca în sursa dumneavoastră - un return aflat pe rândul lui returnează în continuare undefined. Nu redenumește variabile, nu elimină codul mort, nu pliază constante și nu schimbă nivelul de sintaxă, așa că economia este mult mai mică decât cea oferită de un instrument de build. Comentariile care încep cu /*! sau conțin @license ori @preserve sunt păstrate intenționat.
De ce minificatorul CSS a păstrat spațiul din „a :hover”, dar l-a eliminat în „color : red”?
Un spațiu înaintea unui două puncte este un combinator descendent într-un selector și pur zgomot într-o declarație, așa că minificatorul se uită înainte până la următorul {, ; sau } ca să decidă pe care dintre ele îl citește. Șirurile, spațierea din interiorul calc() și spațiile din jurul combinatorilor de selectori sunt lăsate neatinse; un ; final dinaintea lui } este eliminat, iar comentariile sunt șterse dacă nu încep cu /*!.
De ce scriptul din HTML-ul meu a rămas neminificat și de ce mi s-a lipit textul?
Modul HTML extrage fiecare bloc pre, textarea, script și style și îl pune înapoi neatins, așa că CSS-ul și JavaScript-ul încorporate nu sunt minificate - treceți-le separat prin modul CSS sau JavaScript. Din ce rămâne se elimină comentariile, mai puțin cele condiționale, și se comprimă spațiul dintre etichete, ceea ce elimină și spațiul randat dintre elemente inline alăturate, cum ar fi două linkuri sau două span-uri. Cifra economisită compară octeți UTF-8 bruți, nu cât va costa efectiv un răspuns comprimat.
Citiți ghidul complet Formatator de cod (în engleză)