CRX id
begcddgpiamjkanbgdcihlbfdmogcloo
begcddgpiamjkanbgdcihlbfdmogcloo
Description from extension meta
Pengujian regresi visual lokal untuk situs web - bandingkan perubahan UI secara visual dan deteksi perbedaan DOM/CSS tanpa cloud
Image from store
Description from store
Capek memeriksa bug visual secara manual setelah setiap perubahan kode? Penginspeksi Pengujian UI adalah alat pemeriksa perbedaan visual lokal yang dapat diandalkan dengan analisis DOM.
Mengapa menggunakannya?
⚡ 100% Lokal & Pribadi: semua tangkapan layar dan data perbandingan tetap di komputer Anda. Tidak ada layanan cloud, tidak ada berbagi data
⚡ Umpan Balik Instan: instal ekstensi, ambil baseline, lakukan perubahan kode Anda, dan lihat perbedaannya secara instan. Sempurna untuk pengujian regresi cepat
⚡ Deteksi Pixel-Perfect: tangkap bahkan perubahan visual terkecil yang mungkin terlewat oleh mata manusia
Fitur Utama:
🔸 Baseline Satu Klik: tangkap keadaan "sebelum" dari halaman web mana pun dengan satu klik
🔸 Perbedaan Visual Pixel-Perfect: dapatkan laporan jelas yang menunjukkan baseline, keadaan saat ini, dan gambar yang menyoroti perbedaan yang tepat
🔸 Inspeksi Elemen: lihat lebih dari sekadar inspector dasar. Lihat tidak hanya kode, tetapi juga apa yang telah berubah di DOM dan CSS
🔸 Tangkapan Halaman Penuh & Viewport: pilih antara menangkap area yang terlihat atau seluruh halaman yang dapat digulir
🔸 Riwayat Laporan: simpan dan tinjau hingga 15 laporan perbandingan sebelumnya
🔸 Tema Terang & Gelap: untuk tampilan yang nyaman, siang atau malam
Di Dalam Laporan Detail
🔍 Setelah setiap perbandingan, Anda mendapatkan laporan komprehensif yang memberikan gambaran lengkap:
✔️ Ringkasan: persentase perbedaan visual dan jumlah elemen yang ditambahkan, dihapus, dan dimodifikasi
✔️ Tampilan Samping-Sisi: bandingkan tangkapan layar "Sebelum" dan "Sesudah" tepat di samping gambar "Perbedaan" yang disorot
✔️ Daftar Perubahan DOM & CSS: tentukan elemen yang tepat yang berubah. Tidak ada lagi menebak mengapa sebuah piksel bergerak - lihat perubahan tingkat kode seperti warna, ukuran font, atau margin
Apa yang Akan Anda Tangkap:
➤ Perubahan tata letak dan ketidakselarasan
➤ Perubahan warna dan gaya
➤ Elemen yang hilang atau dipindahkan
➤ Modifikasi font dan teks
➤ Perbedaan gambar
Cara Kerjanya:
1️⃣ Atur Baseline Visual: navigasikan ke halaman yang ingin Anda uji dan klik "Atur Baseline" di popup ekstensi. Ini adalah sumber kebenaran Anda.
2️⃣ Kode dengan Percaya Diri: lakukan perubahan pada CSS Anda, perbarui konten, atau refactor komponen.
3️⃣ Periksa Perubahan Secara Instan: klik "Bandingkan dengan Baseline". Tab baru akan terbuka dengan laporan visual yang detail.
4️⃣ Analisis Perbedaannya: gunakan tampilan samping-sisi dan daftar perubahan yang terdeteksi untuk menemukan setiap masalah.
5️⃣ Perbarui Baseline: senang dengan versi baru? Cukup klik "Atur Baseline" lagi untuk menyimpan tampilan baru sebagai referensi Anda.
Tips Pro
✨ Tunggu hingga pemuatan halaman selesai sebelum menangkap baseline
✨ Gunakan tangkapan halaman penuh untuk pengujian yang komprehensif
✨ Ambil tangkapan layar dalam ukuran jendela browser yang sama untuk perbandingan yang akurat
✨ Tangkap baseline saat konten stabil
✨ Uji satu perubahan pada satu waktu untuk hasil perbedaan yang lebih jelas
✨ Simpan baseline penting sebelum refactor kode besar
✨ Bandingkan keadaan halaman yang serupa (status login pengguna yang sama, data yang dimuat)
Kasus Penggunaan
✅ Pengujian Regresi Visual: kasus penggunaan inti. Setelah melakukan perubahan, jalankan perbandingan untuk menangkap bug visual yang tidak diinginkan.
✅ Verifikasi UI/Desain: pastikan implementasi pixel-perfect dan konsistensi merek terhadap mockup desain.
✅ Refactoring CSS: refactor CSS lama tanpa rasa takut. Uji perbedaan visual yang cepat akan segera memberi tahu Anda jika perubahan Anda memiliki efek samping yang tidak terduga.
✅ Pengujian Frontend: alat penting untuk setiap alur kerja pengujian frontend, memberikan umpan balik visual yang segera.
Untuk Siapa Ini Dibuat?
➡️ Pengembang Frontend: Tangkap masalah tata letak sebelum Anda mengkomit kode Anda
➡️ Insinyur QA: Tingkatkan pengujian UI manual Anda dengan langkah verifikasi visual yang dapat diandalkan
➡️ Desainer UI/UX: Pastikan implementasi langsung cocok dengan desain Anda dengan cepat
➡️ Freelancer & Tim Kecil: Alat pengujian visual tanpa harga perusahaan
Mengapa Ini Menonjol
🖼️ Lebih Baik Dari Tangkapan Layar Manual: berhenti mengatur gambar sebelum-dan-setelah di folder desktop Anda
📝 Tanpa Kurva Pembelajaran: jika Anda bisa menjelajah, Anda bisa menggunakan alat ini
FAQ
❓Bagaimana cara mendeteksi perubahan?
💬 Ini menggunakan pendekatan metode ganda: perbandingan piksel demi piksel untuk perbedaan visual dan pemindaian struktural untuk daftar perubahan DOM/CSS.
❓Apakah data saya aman?
💬Ya. Segala sesuatu diproses dan disimpan 100% secara lokal di browser Anda.
❓Bisakah saya menggunakannya di localhost?
💬Tentu saja! Ini bekerja dengan sempurna selama pengembangan lokal
❓Bagaimana dengan konten dinamis?
💬 Alat ini dirancang untuk membandingkan keadaan statis. Untuk hasil terbaik, ambil tangkapan layar Anda saat animasi selesai dan iklan stabil.
Latest reviews
- (2025-07-09) Дарья Петрова: Creates a full and detailed report of differences between two versions of web pages. Waiting for Visual comparison of whole page, not just viewport visible parts.