Izvoz Elementa omogućuje vam da kliknete na bilo koji element na web stranici i izvezete njegovu potpunu strukturu u tri formata: sirovi HTML markup sa svom djecom i atributima, computed CSS stilovi kao čisti stylesheet, ili strukturirana JSON reprezentacija. Savršen alat za izvlačenje dizajnerskih obrazaca, spremanje isječaka koda i dokumentiranje UI komponenti.
Svaki programer ima trenutke kada treba izvući kod iz postojeće stranice — možda je to lijepo oblikovana komponenta kartice, dobro strukturirana navigacijska traka ili raspored forme koji želite replicirati. Obično to znači desni klik, "Inspect Element", ručno kopiranje HTML-a iz panela Elements, a zatim zasebno izvlačenje CSS-a iz panela Styles. Izvoz Elementa sve to sažima u jedan klik. Odaberite bilo koji element i dobijte njegov potpuni HTML, puni computed CSS ili strukturiranu JSON reprezentaciju — svaki u svojoj kartici, formatiran i spreman za upotrebu. HTML izvoz uključuje element i svu njegovu djecu s pravilnim uvlačenjem. CSS izvoz prikazuje svaki computed style (ne samo autorske stilove), tako da dobivate točan izgled koji preglednik prikazuje. JSON izvoz pruža strukturiranu podatkovnu reprezentaciju korisnu za dokumentaciju, testiranje ili programatsku analizu.
<div class="pricing-card">
<div class="card-header">
<img src="icon.svg"/>
<h3>Pricing Card</h3>
</div>
<p>$29.99/month</p>
<button>Subscribe</button>
</div>
Dobijte potpuni HTML markup odabranog elementa uključujući svu djecu, atribute i ugniježđenu strukturu. Izlaz je pravilno uvučen i formatiran — nije jednolinski nered koji dobivate od outerHTML. Spreman za lijepljenje u novu HTML datoteku ili predložak komponente.
Izvucite svako computed CSS svojstvo elementa kao čisti, formatirani stylesheet. Uključuje tipografiju, boje, razmake, obrube, raspored i pozicioniranje. CSS je ono što preglednik zapravo prikazuje — uzimajući u obzir nasljeđivanje, specifičnost i kaskadiranje.
Dobijte JSON objekt koji sadrži naziv oznake elementa, mapu atributa, computed styles, unutarnji tekstualni sadržaj i rekurzivni niz djece. Korisno za programatsku analizu, dokumentaciju, testne fiksture ili izgradnju prilagođenih alata.
Prebacujte se između kartica HTML, CSS i JSON trenutačno. Svaki format generira se iz istog odabranog elementa, tako da možete uzeti bilo koju reprezentaciju koja vam je potrebna. Sva tri su uvijek dostupna bez ponovnog odabira elementa.
Svaki format izvoza prikazuje se s isticanjem sintakse u panelu za pregled. HTML oznake su crvene, atributi žuti, vrijednosti zelene. CSS svojstva su ljubičasta, vrijednosti zelene. JSON ključevi i vrijednosti su kodno obojeni. Lako za čitanje prije kopiranja.
Kliknite gumb Kopiraj da preuzmete sadržaj trenutne kartice. Statusna traka prikazuje broj redaka i veličinu u bajtovima izvoza, tako da znate koliko sadržaja kopirate. Povratna informacija potvrde prikazuje se kada kopiranje uspije.
Pronašli ste karticu, hero odjeljak ili navigacijsku traku koju želite replicirati? Kliknite je, izvezite HTML za strukturu, zatim izvezite CSS za stiliziranje. Imate potpuno polazište za vlastitu komponentu.
Izvezite elemente kao JSON za dokumentaciju ili zapise dizajnerskog sustava. Strukturirana reprezentacija uključuje nazive oznaka, atribute i stilove — savršeno za održavanje inventara komponenti ili punjenje u alate za dokumentaciju.
Trebate li HTML fiksture za jedinične testove? Izvezite HTML elementa i zalijepite ga u svoju testnu datoteku. Izlaz je čist i formatiran, spreman za upotrebu kao DOM snimak za testiranje komponenti.
CSS izvoz prikazuje computed styles — ono što preglednik zapravo prikazuje nakon što su primijenjene sve CSS pravila. Usporedite computed izlaz s vašim autorskim CSS-om kako biste pronašli sukobe specifičnosti, nasljeđivanja ili neočekivane zadane vrijednosti.
Kopirajte elegantne implementacije s produkcijskih stranica u osobnu biblioteku isječaka. Izvezite i HTML i CSS zajedno da sačuvate potpunu komponentu — strukturu i stiliziranje — za buduću referencu.
Otvorite plutajući dock DevSuite Pro i kliknite ikonu Izvoz Elementa. Kursor se mijenja u selektor nišana, a otvara se panel za izvoz s karticama.
Kliknite bilo koji element na stranici. Označava se ljubičastim obrubom, a panel za izvoz popunjava se HTML, CSS i JSON reprezentacijama elementa raspoređenim u tri kartice.
Kliknite karticu HTML, CSS ili JSON za prikaz elementa u različitim formatima. Svaka kartica prikazuje formatiran pregled sadržaja izvoza s isticanjem sintakse.
Pregledajte pregled kako biste se uvjerili da sadrži ono što trebate. Kliknite gumb "Kopiraj" da postavite sadržaj trenutne kartice na međuspremnik. Statusna traka prikazuje broj redaka i veličinu.
Kliknite drugi element na stranici da ažurirate panel za izvoz novim sadržajem. Nema potrebe za deaktivacijom — nastavite klikati da izvezete više elemenata.
Instalirajte DevSuite Pro besplatno i otključajte 39+ razvojnih alata za svoj preglednik.