Ekspor Elemen

Pratinjau Langsung

example.com/components

Klik elemen apa pun untuk mengekspor

Kartu Harga

Dipilih untuk ekspor

$29.99/month

Ekspor Elemen

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 baris · 248 byte Salin HTML

Fitur Utama

Ekspor sebagai HTML Bersih

Dapatkan markup HTML lengkap dari elemen yang dipilih termasuk semua elemen anak, atribut, dan struktur bersarangnya. Output sudah diindentasi dan diformat dengan rapi — bukan satu baris berantakan seperti yang Anda dapatkan dari outerHTML. Siap ditempelkan ke file HTML baru atau template komponen.

Ekspor sebagai CSS Terhitung

Ekstrak setiap properti CSS terhitung (computed) untuk elemen tersebut sebagai stylesheet yang bersih dan terformat. Mencakup tipografi, warna, spasi, bingkai, tata letak, dan posisi. CSS ini adalah apa yang sebenarnya dirender oleh browser — memperhitungkan pewarisan (inheritance), spesifisitas, dan cascading.

Ekspor sebagai JSON Terstruktur

Dapatkan objek JSON yang berisi nama tag elemen, peta atribut, gaya terhitung, konten teks dalam, dan array elemen anak secara rekursif. Berguna untuk analisis programatik, dokumentasi, pengujian fixture, atau membangun alat kustom.

Perpindahan Format Berbasis Tab

Beralih antara tab HTML, CSS, dan JSON secara instan. Setiap format dihasilkan dari elemen terpilih yang sama, sehingga Anda dapat mengambil representasi mana pun yang Anda butuhkan. Ketiganya selalu tersedia tanpa harus memilih ulang elemen.

Pratinjau dengan Syntax Highlighting

Setiap format ekspor ditampilkan dengan penyorotan sintaks (syntax highlighting) pada panel pratinjau. Tag HTML berwarna merah, atribut kuning, nilai hijau. Properti CSS berwarna ungu, nilai hijau. Kunci dan nilai JSON diberikan kode warna. Mudah dibaca sebelum disalin.

Salin Sekali Klik dengan Info Ukuran

Klik tombol Salin untuk mengambil konten tab saat ini. Bar status menunjukkan jumlah baris dan ukuran byte dari ekspor tersebut, sehingga Anda tahu berapa banyak konten yang Anda salin. Umpan balik konfirmasi akan muncul saat penyalinan berhasil.

Kasus Penggunaan Umum

Ekstrak Komponen dari Situs Referensi

Menemukan kartu, bagian hero, atau bilah navigasi yang ingin Anda tiru? Klik elemen tersebut, ekspor HTML untuk strukturnya, lalu ekspor CSS untuk gayanya. Anda memiliki titik awal yang lengkap untuk komponen Anda sendiri.

Mendokumentasikan Komponen UI

Ekspor elemen sebagai JSON untuk dokumentasi atau catatan sistem desain. Representasi terstruktur mencakup nama tag, atribut, dan gaya — sangat cocok untuk mengelola inventaris komponen atau dimasukkan ke alat dokumentasi.

Membuat Fixture Pengujian

Butuh fixture HTML untuk unit test? Ekspor HTML elemen dan tempelkan ke file pengujian Anda. Output-nya bersih dan terformat, siap digunakan sebagai snapshot DOM untuk pengujian komponen.

Debug Masalah Gaya Terhitung

Ekspor CSS menunjukkan gaya terhitung (computed styles) — apa yang sebenarnya dirender browser setelah semua aturan CSS diterapkan. Bandingkan output terhitung ini dengan CSS yang Anda tulis untuk menemukan konflik spesifisitas atau nilai default yang tak terduga.

Menyimpan Cuplikan Kode untuk Referensi

Salin implementasi yang elegan dari situs produksi ke pustaka cuplikan (snippet) pribadi Anda. Ekspor HTML dan CSS secara bersamaan untuk menjaga komponen tetap utuh — baik struktur maupun gayanya — untuk referensi di masa mendatang.

Cara Menggunakan

Aktifkan Ekspor Elemen

Buka dok mengambang DevSuite Pro dan klik ikon Ekspor Elemen. Kursor akan berubah menjadi pemilih crosshair, dan panel ekspor berbasis tab akan terbuka.

Klik Elemen untuk Memilih

Klik elemen apa pun di halaman. Elemen tersebut akan disorot dengan garis tepi ungu, dan panel ekspor akan terisi dengan representasi HTML, CSS, dan JSON dari elemen tersebut di tiga tab yang tersedia.

Beralih Antar Format

Klik tab HTML, CSS, atau JSON untuk melihat elemen dalam format yang berbeda. Setiap tab menunjukkan pratinjau konten ekspor yang diformat dan memiliki penyorotan sintaks.

Tinjau & Salin

Periksa pratinjau untuk memastikan konten berisi apa yang Anda butuhkan. Klik tombol "Salin" untuk memindahkan konten tab saat ini ke clipboard Anda. Bar status akan menunjukkan jumlah baris dan ukuran data.

Pilih Elemen Lain

Klik elemen yang berbeda pada halaman untuk memperbarui panel ekspor dengan konten baru. Tidak perlu menonaktifkan alat — teruskan klik untuk mengekspor beberapa elemen.