Export Element laat je elk element op een webpagina klikken en de volledige structuur in drie formaten exporteren: rauwe HTML-opmaak met alle kinderen en kenmerken, berekende CSS-stijlen als schone stylesheet of een gestructureerde JSON-representatie. Het perfecte gereedschap voor het extraheren van ontwerppatronen, het opslaan van codefragmenten en het documenteren van UI-componenten.
Elke ontwikkelaar heeft momenten waarop hij code uit een bestaande pagina moet extraheren — misschien is het een mooi gestileerde kaartcomponent, een goed gestructureerde navigatiebalk of een formulierindeling die je wilt repliceren. Normaal gesproken betekent dit met de rechtermuisknop klikken, "Element inspectie", handmatig HTML uit het elementenpaneel kopiëren en vervolgens CSS afzonderlijk uit het stijlenpaneel extraheren. Export Element consolideert dit in één klik. Selecteer een element en krijg de volledige HTML, volledige berekende CSS of een gestructureerde JSON-representatie — elk in zijn eigen tabblad, opgemaakt en klaar voor gebruik. De HTML-export bevat het element en al zijn kinderen met juiste inspringing. De CSS-export toont elke berekende stijl (niet alleen geschreven stijlen), dus je krijgt het exacte uiterlijk dat de browser weergeeft. De JSON-export biedt een gestructureerde gegevensrepresentatie die nuttig is voor documentatie, testen of programmatische 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>
Krijg de volledige HTML-opmaak van het geselecteerde element inclusief alle kinderen, kenmerken en geneste structuur. De uitvoer is goed ingesprongen en opgemaakt — niet de eenzijdige warboel die je van outerHTML krijgt. Klaar om in een nieuw HTML-bestand of componentsjabloon in te plakken.
Extraheer elke berekende CSS-eigenschap voor het element als schone, opgemaakt stylesheet. Inclusief typografie, kleuren, afstand, randen, indeling en positionering. De CSS is wat de browser daadwerkelijk weergeeft — rekening houdend met overerving, specificiteit en cascading.
Krijg een JSON-object met de tagnaam van het element, attributenkaart, berekende stijlen, binnenste tekstinhoud en een recursieve kinderenarray. Nuttig voor programmatische analyse, documentatie, testkomponenenten of het bouwen van aangepaste gereedschappen.
Schakel onmiddellijk tussen tabbladen voor HTML, CSS en JSON. Elke indeling wordt gegenereerd vanuit hetzelfde geselecteerde element, dus je kunt welke representatie dan ook aanpakken. Alle drie zijn altijd beschikbaar zonder het element opnieuw te selecteren.
Elke exportindeling wordt weergegeven met syntaxis markeren in het voorvertoningspaneel. HTML-tags in rood, kenmerken in geel, waarden in groen. CSS-eigenschappen in paars, waarden in groen. JSON-sleutels en waarden zijn kleurgecodeerd. Gemakkelijk te lezen voordat je kopieert.
Klik op de kopieerknop om de inhoud van het huidige tabblad aan te pakken. Een statusbalk toont het regelaantal en bytegrootte van de export, dus je weet hoeveel inhoud je kopieert. Bevestigingsfeedback wordt weergegeven wanneer de kopie succesvol is.
Een kaart, hero-sectie of navigatiebalk gevonden die je wilt repliceren? Klik erop, exporteer de HTML voor de structuur en exporteer vervolgens de CSS voor de styling. Je hebt een volledig startpunt voor je eigen component.
Exporteer elementen als JSON voor documentatie of ontwerpssysteemrecords. De gestructureerde representatie bevat tagnamen, kenmerken en stijlen — perfect voor het onderhouden van een componentinventaris of het voeden in documentatietools.
HTML-componenten nodig voor eenheidstests? Exporteer de HTML van het element en plak deze in het testbestand. De uitvoer is schoon en opgemaakt, klaar voor gebruik als DOM-snapshot voor componenttesting.
De CSS-export toont berekende stijlen — wat de browser daadwerkelijk weergeeft nadat alle CSS-regels zijn toegepast. Vergelijk de berekende uitvoer met je geschreven CSS om specificiteitsconflicten, erfenisoverschrijvingen of onverwachte standaardwaarden te vinden.
Kopieer elegante implementaties van productiesites naar een persoonlijke fragmentbibliotheek. Exporteer HTML en CSS samen om de volledige component — structuur en styling — voor toekomstige referentie te behouden.
Open het DevSuite Pro zwevende dock en klik op het pictogram Exportsgebeurtenis. De cursor verandert in een draadroos selector en een tabbladpaneel wordt geopend.
Klik op een element op de pagina. Het wordt gemarkeerd met een paarse rand en het exportpaneel wordt gevuld met HTML-, CSS- en JSON-representaties van het element op drie tabbladen.
Klik op het tabblad HTML, CSS of JSON om het element in verschillende formaten weer te geven. Elk tabblad toont een syntaxis gemarkeerde, opgemaakt voorvertoning van de exportinhoud.
Scan de voorvertoning om er zeker van te zijn dat deze bevat wat je nodig hebt. Klik op de knop "Kopiëren" om de inhoud van het huidige tabblad in je klembord te plaatsen. De statusbalk toont regelaantal en grootte.
Klik op een ander element op de pagina om het exportpaneel met nieuwe inhoud bij te werken. Geen behoefte om te deactiveren — ga door met klikken om meerdere elementen te exporteren.
Installeer DevSuite Pro gratis en ontgrendel 64+ ontwikkelaarstools voor uw browser.