Eksportér element lader dig klikke på et element på en webside og eksportere dets komplette struktur i tre formater: rå HTML-opmærkning med alle underordnede og attributter, beregnede CSS-typografier som et rent stylesheet eller en struktureret JSON-repræsentation. Det perfekte værktøj til at udtrække designmønstre, gemme kodestykker og dokumentere UI-komponenter.
Alle udviklere har øjeblikke, hvor de skal udtrække kode fra en eksisterende side — måske er det en smukt stylet kortkomponent, en velstruktureret navigationslinje eller et formularlayout, de vil replikere. Normalt betyder dette at højreklikke, "Inspicér element", manuelt kopiere HTML fra Elementerpanelet og derefter separat udtrække CSS fra Stilepanelet. Eksportér element konsoliderer dette til ét klik. Vælg et element og få dets komplette HTML, fuld beregnet CSS eller en struktureret JSON-repræsentation — hver i sin egen fane, formateret og klar til brug. HTML-eksporten inkluderer elementet og alle dets underordnede med korrekt indrykning. CSS-eksporten viser alle beregnede typografier (ikke kun forfattede typografier), så du får præcis det udseende, browseren gengiver. JSON-eksporten giver en struktureret datarepræsentation, der er nyttig til dokumentation, test eller programmatisk analyse.
<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>
Hent den komplette HTML-opmærkning af det valgte element inkl. alle underordnede, attributter og indlejret struktur. Outputtet er korrekt indrykket og formateret — ikke det enkelt-linje-rod, du får fra outerHTML. Klar til at indsætte i en ny HTML-fil eller komponentskabelon.
Udtræk alle beregnede CSS-egenskaber for elementet som et rent, formateret stylesheet. Inkluderer typografi, farver, afstand, kanter, layout og positionering. CSS'en er det, browseren faktisk gengiver — med beregning af arv, specificitet og cascading.
Hent et JSON-objekt med elementets tag-navn, attributkort, beregnede typografier, indre tekstindhold og et rekursivt børne-array. Nyttigt til programmatisk analyse, dokumentation, testfixtures eller bygning af brugerdefinerede værktøjer.
Skift øjeblikkeligt mellem HTML-, CSS- og JSON-faner. Hvert format genereres fra det samme valgte element, så du kan hente den repræsentation, du har brug for. Alle tre er altid tilgængelige uden at vælge elementet igen.
Hvert eksportformat vises med syntaksfremhævning i forhåndsvisningspanelet. HTML-tags i rødt, attributter i gult, værdier i grønt. CSS-egenskaber i lilla, værdier i grønt. JSON-nøgler og -værdier er farvekodede. Nemt at læse inden kopiering.
Klik på Kopiér-knappen for at hente den aktuelle fanes indhold. En statuslinje viser linjeantal og bytestørrelse af eksporten, så du ved, hvor meget indhold du kopierer. Bekræftelsesfeedback vises, når kopieringen lykkes.
Fandt du et kort, hero-sektion eller navigationslinje, du vil replikere? Klik på det, eksportér HTML for strukturen, og eksportér derefter CSS for stilen. Du har et komplet udgangspunkt for din egen komponent.
Eksportér elementer som JSON til dokumentation eller designsystemregistre. Den strukturerede repræsentation inkluderer tag-navne, attributter og typografier — perfekt til at vedligeholde en komponentfortegnelse eller tilføre dokumentationsværktøjer.
Har du brug for HTML-fixtures til enhedstest? Eksportér elementets HTML og indsæt det i din testfil. Outputtet er rent og formateret, klar til brug som et DOM-snapshot til komponenttestning.
CSS-eksporten viser beregnede typografier — hvad browseren faktisk gengiver, efter alle CSS-regler er anvendt. Sammenlign det beregnede output med din forfattede CSS for at finde specificiteskonflikter, arvtilsidesættelser eller uventede standardværdier.
Kopiér elegante implementeringer fra produktionssider til et personligt bibliotek med kodestykker. Eksportér både HTML og CSS sammen for at bevare den komplette komponent — struktur og styling — til fremtidig reference.
Åbn den flydende dock i DevSuite Pro og klik på ikonet Eksportér element. Markøren skifter til en trådkorsvælger, og et panel med faner åbner.
Klik på et element på siden. Det fremhæves med en lilla kant, og eksportpanelet udfyldes med elementets HTML-, CSS- og JSON-repræsentationer på tværs af tre faner.
Klik på fanen HTML, CSS eller JSON for at se elementet i forskellige formater. Hver fane viser en syntaksfremhævet, formateret forhåndsvisning af eksportindholdet.
Gennemse forhåndsvisningen for at sikre, at den indeholder det, du har brug for. Klik på knappen "Kopiér" for at lægge den aktuelle fanes indhold på din udklipsholder. Statuslinjen viser linjeantal og størrelse.
Klik på et andet element på siden for at opdatere eksportpanelet med nyt indhold. Du behøver ikke deaktivere — bliv ved med at klikke for at eksportere flere elementer.
Installer DevSuite Pro gratis og lås op for 39+ udviklerværktøjer til din browser.