← Torna alle funzionalità
Pro

Esporta elemento

Esporta elemento ti permette di cliccare su qualsiasi elemento ed esportare la sua struttura completa in tre formati.

Ogni sviluppatore ha momenti in cui deve estrarre codice da una pagina esistente. Esporta elemento consolida tutto in un clic.

Anteprima dal vivo
example.com/components
Click any element to export
Pricing Card
Selected for export
$29.99/month
Subscribe
Export Element
HTML CSS JSON
<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>
7 lines · 248 bytes Copy HTML
Caratteristiche principali

Esporta come HTML pulito

Ottieni il markup HTML completo con tutti i figli e attributi, correttamente indentato.

Esporta come CSS calcolato

Estrai ogni proprietà CSS calcolata come foglio di stile formattato.

Esporta come JSON strutturato

Ottieni un oggetto JSON con nome tag, attributi, stili e figli ricorsivi.

Cambio formato a schede

Passa tra HTML, CSS e JSON istantaneamente.

Anteprima con evidenziazione sintassi

Ogni formato viene mostrato con evidenziazione sintassi nel pannello di anteprima.

Copia con info dimensione

Clicca Copia per copiare. La barra di stato mostra righe e dimensione in byte.

Casi d'uso comuni

Estrarre componenti da siti di riferimento

Trovato un card o hero section da replicare? Clicca ed esporta HTML e CSS.

Documentare componenti UI

Esporta elementi come JSON per documentazione o design system.

Creare fixture per test

Esporta l'HTML dell'elemento e incollalo nel file di test.

Debug stili calcolati

L'export CSS mostra gli stili calcolati — ciò che il browser effettivamente renderizza.

Salvare frammenti di codice

Copia implementazioni eleganti da siti in produzione nella tua libreria di frammenti.

Come usare
1

Attiva Esporta elemento

Apri il dock e clicca sull'icona Esporta elemento.

2

Clicca per selezionare

Clicca su qualsiasi elemento. Il pannello si popola con le rappresentazioni HTML, CSS e JSON.

3

Cambia formato

Clicca sulla scheda HTML, CSS o JSON per vedere formati diversi.

4

Rivedi e copia

Controlla l'anteprima e clicca Copia per copiare negli appunti.

5

Seleziona un altro elemento

Clicca su un elemento diverso per aggiornare il pannello.

Pronto a provare? Esporta elemento?

Installa DevSuite Pro gratuitamente e sblocca più di 39 strumenti per sviluppatori per il tuo browser.

Aggiungi a Chrome Aggiungi a Edge Aggiungi a FireFox