Exporta l'element et permet fer clic en qualsevol element d'una pàgina web i exportar la seva estructura completa en tres formats: marcatge HTML pur amb tots els fills i atributs, estils CSS computats com un full d'estil net o una representació JSON estructurada. L'eina perfecta per extraure patrons de disseny, desar fragments de codi i documentar components de la interfície d'usuari (UI).
Cada desenvolupador té moments en què necessita extraure codi d'una pàgina existent — potser és un component de targeta ben dissenyat, una barra de navegació ben estructurada o un disseny de formulari que vols replicar. Normalment, això implica fer clic amb el botó dret, "Inspecciona l'element", copiar manualment l'HTML des del panell d'Elements i després extraure el CSS per separat des del panell d'Estils. Exporta l'element ho consolida tot en un sol clic. Selecciona qualsevol element i obtén el seu HTML complet, el CSS computat total o una representació JSON estructurada — cadascun a la seva pròpia pestanya, amb format i a punt per utilitzar. L'exportació d'HTML inclou l'element i tots els seus fills amb el sagnat adequat. L'exportació de CSS mostra cada estil computat (no només els estils escrits), de manera que obtens l'aparença exacta que el navegador renderitza. L'exportació JSON proporciona una representació de dades estructurada útil per a la documentació, les proves o l'anàlisi programàtica.
<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>
Obtingues el marcatge HTML complet de l'element seleccionat, incloent tots els fills, atributs i l'estructura de niuament. El resultat té el sagnat i el format adequats — no és el desordre d'una sola línia que obtens de l'outerHTML. A punt per enganxar en un nou fitxer HTML o plantilla de component.
Extrau cada propietat CSS computada de l'element com un full d'estils net i amb format. Inclou la tipografia, els colors, l'espaiat, les vores, el disseny i el posicionament. El CSS és el que el navegador realment renderitza — tenint en compte l'herència, l'especificitat i la cascada.
Obtingues un objecte JSON que contingui el nom de l'etiqueta de l'element, el mapa d'atributs, els estils computats, el contingut de text intern i una matriu de fills recursiva. Útil per a l'anàlisi programàtica, la documentació, els accessoris de prova (fixtures) o la creació d'eines personalitzades.
Canvia entre les pestanyes d'HTML, CSS i JSON a l'instant. Cada format es genera a partir del mateix element seleccionat, de manera que pots agafar la representació que necessitis. Tots tres formats estan sempre disponibles sense haver de tornar a seleccionar l'element.
Cada format d'exportació es mostra amb ressaltat de sintaxi al panell de previsualització. Les etiquetes HTML en vermell, els atributs en groc i els valors en verd. Les propietats CSS en lila i els valors en verd. Les claus i valors JSON estan codificats per colors. Fàcil de llegir abans de copiar.
Fes clic al botó Copia per agafar el contingut de la pestanya actual. Una barra d'estat mostra el nombre de línies i la mida en bytes de l'exportació per saber quant de contingut estàs copiant. Una confirmació indica quan la còpia s'ha realitzat correctament.
Has trobat una targeta, una secció hero o una barra de navegació que vols replicar? Clica-la, exporta l'HTML per a l'estructura i després exporta el CSS per a l'estil. Tindràs un punt de partida complet per al teu propi component.
Exporta elements com a JSON per a documentació o registres del sistema de disseny. La representació estructurada inclou noms d'etiquetes, atributs i estils — perfecte per mantenir un inventari de components o alimentar eines de documentació.
Necessites fixtures d'HTML per a les proves unitàries? Exporta l'HTML de l'element i enganxa'l al fitxer de prova. El resultat és net i amb format, a punt per ser utilitzat com una instantània (snapshot) del DOM per a les proves dels components.
L'exportació de CSS mostra els estils computats — el que el navegador realment renderitza després d'aplicar totes les regles CSS. Compara el resultat computat amb el teu CSS original per trobar conflictes d'especificitat, superposicions d'herència o valors per defecte inesperats.
Copia implementacions elegants de llocs de producció en una biblioteca de fragments personal. Exporta l'HTML i el CSS junts per preservar el component complet — estructura i estil — per a referència futura.
Obre el tauler flotant de DevSuite Pro i fes clic a la icona d'Exporta l'element. El cursor canviarà a un selector de punt de mira (crosshair) i s'obrirà un panell d'exportació amb pestanyes.
Fes clic a qualsevol element de la pàgina. Quedarà ressaltat amb una vora porpra i el panell d'exportació s'omplirà amb les representacions HTML, CSS i JSON de l'element en tres pestanyes.
Fes clic a la pestanya HTML, CSS o JSON per veure l'element en diferents formats. Cada pestanya mostra una previsualització amb format i ressaltat de sintaxi del contingut exportat.
Revisa la previsualització per assegurar-te que conté el que necessites. Clica el botó "Copia" per posar el contingut de la pestanya actual al porta-retalls. La barra d'estat mostra el nombre de línies i la mida.
Fes clic a un element diferent de la pàgina per actualitzar el panell d'exportació amb contingut nou. No cal desactivar-lo — continua clicant per exportar múltiples elements.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 39 eines de desenvolupador per al teu navegador.