Tambahkan ekstensi ke Chrome
- Buka Chrome Web Store dan cari Ekstensi "DevSuite Pro".
- Klik "Tambahkan ke Chrome" lalu konfirmasi dengan mengklik "Tambahkan ekstensi" di jendela pop-up.
64+ alat canggih untuk memeriksa, mengukur, menangkap, menganalisis, dan mendesain halaman web langsung di browser Anda.
Memulai sangat mudah. Instal ekstensi, buka halaman web mana pun, dan akses 64+ alat pengembang dari popup atau dok mengambang. Tidak perlu konfigurasi.
DevSuite Pro menawarkan 64+ alat pengembang untuk memeriksa, mengukur, mendesain, dan menganalisis halaman web. Tingkatkan alur kerja Anda dengan fitur canggih yang terintegrasi langsung di browser Anda.
Arahkan kursor ke elemen mana pun untuk langsung melihat dan mengedit gaya CSS-nya secara langsung, memudahkan proses debug dan penyesuaian desain secara real-time.
Pelajari lebih lanjut →Klik elemen mana pun untuk memeriksa propertinya, dimensi, jarak, font, dan warna. Pahami struktur halaman secara instan tanpa membuka DevTools browser.
Pelajari lebih lanjut →Ukur jarak, periksa penyelarasan, dan tambahkan penggaris serta panduan presisi piksel di halaman web mana pun untuk memastikan desain Anda selaras sempurna.
Pelajari lebih lanjut →Ambil warna dari elemen mana pun di halaman dan salin nilai HEX, RGB, atau HSL ke clipboard Anda dengan satu klik.
Pelajari lebih lanjut →Tangkap screenshot seluruh halaman atau area yang terlihat dari halaman web mana pun dan unduh secara instan — sempurna untuk berbagi desain dan melaporkan bug.
Pelajari lebih lanjut →Pratinjau halaman web mana pun di berbagai ukuran layar dan resolusi perangkat untuk menguji desain responsif tanpa meninggalkan browser Anda.
Pelajari lebih lanjut →Periksa dan edit gaya CSS secara real-time
Debug dan kontrol animasi CSS secara real-time
Konversi CSS elemen ke kelas Tailwind
Visualisasikan struktur tata letak halaman
Dapatkan kelas Tailwind terkategorisasi
Tampilan pohon HTML visual
Deteksi komponen React, Vue, Angular, dan Svelte
Seret dan lepas untuk memindahkan elemen
Hapus atau alihkan visibilitas elemen
Ekspor sebagai HTML, CSS, atau JSON
Hasilkan komponen React, Vue, dan Svelte
Tangkap area terlihat atau seluruh halaman
Lihat, pilih, dan unduh semua gambar
Temukan, pratinjau, dan unduh setiap SVG
Ganti gambar apa pun dengan milik Anda
Buat kode QR secara instan
Penggaris dan panduan presisi piksel
Pratinjau beberapa perangkat sekaligus
Ukur jarak piksel yang tepat
Visualisasikan konteks tumpukan dan lapisan z-index
Periksa CSS Grid dan Flexbox dengan overlay visual
Simulasikan titik perhatian pengguna
Hapus cache, cookie, localStorage secara selektif
Deteksi setiap teknologi di balik situs web
Audit SEO lengkap: Meta Tag, Heading, OpenGraph
Audit WCAG Otomatis: Kontras, Alt Text, ARIA
Klik teks apa pun untuk mengedit secara instan
Ganti font secara global atau per elemen
Temukan setiap font yang digunakan
Alat pipet presisi untuk HEX, RGB dan HSL
Ekstrak palet warna lengkap
Terapkan mode gelap di situs apa pun secara instan
Aktifkan atau nonaktifkan JavaScript secara instan
Lihat, edit, tambah dan hapus cookie
Lihat output konsol di panel mengambang
Pantau semua permintaan jaringan secara real-time
Lihat dan edit localStorage dan sessionStorage
Pindai setiap tautan dan temukan yang rusak
Dashboard kinerja instan
Format, Minify & Validasi JSON dalam Satu Klik
Encode String Ke & Dari Base64 Secara Instan
Encode & Decode String URL dalam Satu Klik
Encode & Decode HTML Entity Secara Instan
Escape & Unescape String untuk Kode
Konversi Gambar Ke & Dari Data URI Base64 Secara Instan
Dekode JSON Web Token Secara Instan
Hasilkan Identitas UUID v4 Secara Massal
Hitung Hash MD5, SHA-1, SHA-256, SHA-384, SHA-512
Hasilkan Kata Sandi yang Kuat Secara Kriptografis
Uji Ekspresi Reguler Langsung Dengan Sorotan Kecocokan
Konversi Tanggal Unix, ISO, dan Dapat Dibaca Manusia
Bandingkan Dua Blok Teks Baris demi Baris
Periksa Rasio Kontras WCAG dari Dua Warna Apa Pun
Konversi HEX, RGB, HSL, HSV & OKLCH Secara Instan
Ekstrak Palet Dominan Dari Gambar Apa Pun
Dapatkan Pemilih CSS & XPath Untuk Elemen Apa Pun
Uji Permintaan Lintas-Asal & Inspeksi Header CORS
Tangkap Bingkai WebSocket Secara Real-Time
Pindai Halaman untuk Gambar Rusak Secara Instan
Isi Otomatis Formulir dengan Data Uji Realistis
Konversi Antara CSV dan JSON di Salah Satu Arah
Format, Validasi & Lihat XML Dengan Penyorotan Sintaks
Cantikkan & Format Kueri SQL
Simpan Halaman Web Sebagai PDF Bersih
Pilih rencana yang sesuai dengan alur kerja Anda. Mulai secara gratis, tingkatkan kapan saja.
Pertanyaan umum tentang fitur dan penggunaan ekstensi DevSuite Pro. Jika Anda memiliki pertanyaan, jawabannya mungkin sudah ada di bawah.
Kunjungi Chrome Web Store, cari "DevSuite Pro", klik "Tambahkan ke Chrome", dan konfirmasi dengan memilih "Tambahkan Ekstensi". Setelah terinstal, ikon ekstensi akan muncul di toolbar browser Anda. Klik untuk mengakses 64+ alat pengembang secara instan.
Alat gratis (20+) tersedia untuk semua orang tanpa lisensi. Alat Pro ditandai dengan lencana PRO emas dan memerlukan lisensi Pro aktif. Anda dapat melihat alat mana yang gratis atau pro dari popup — alat gratis tidak memiliki ikon gembok, sementara alat pro tampak sedikit redup sampai Anda mengaktifkan lisensi.
Beberapa situs web memiliki Kebijakan Keamanan Konten (CSP) yang ketat yang memblokir tindakan ekstensi browser tertentu. Ini terutama umum di situs perbankan dan pemerintah. Selain itu, halaman internal Chrome (chrome://) tidak mengizinkan ekstensi menjalankan skrip konten.
Tidak. Semua perubahan yang dibuat oleh alat seperti Move Element, Live Text Editor, Delete/Hide Element, dan CSS Inspector bersifat sementara. Perubahan hanya memengaruhi apa yang Anda lihat di browser saat ini. Memuat ulang halaman akan mengembalikan semuanya ke keadaan semula.
Buka popup DevSuite Pro, klik ikon Pengaturan di pojok kanan atas. Gulir ke bawah ke bagian Lisensi, tempel kunci lisensi Anda di kolom input, and klik Aktifkan. Jika kunci valid, lencana akan berubah dari FREE menjadi PRO dan semua alat pro akan terbuka secara instan.
Anda dapat memindahkan dok dengan masuk ke Pengaturan dan memilih posisi sidebar yang berbeda — Atas, Bawah, Kiri, atau Kanan. Anda juga dapat menyembunyikan dok sepenuhnya dengan menonaktifkan "Tampilkan dok di halaman" di Pengaturan, atau menekan Ctrl+Shift+X kapan saja.
Tidak. DevSuite Pro tidak mengumpulkan, melacak, atau mengirimkan data penjelajahan Anda. Semua pengaturan disimpan secara lokal di browser Anda. Satu-satunya permintaan eksternal dilakukan saat aktivasi kunci lisensi untuk memverifikasi kunci Anda di server kami.
Ya! DevSuite Pro tersedia di Chrome Web Store dan Firefox Add-ons. Ini berfungsi di Chrome, Edge, Brave, dan browser berbasis Chromium lainnya, serta Firefox.