CRX id
begcddgpiamjkanbgdcihlbfdmogcloo
begcddgpiamjkanbgdcihlbfdmogcloo
Description from extension meta
Web sayfalarını güncellemeden önce ve sonra görsel değişiklikleri detaylı raporlar ve DOM analizi ile karşılaştırın.
Image from store
Description from store
Her kod güncellemesinden sonra “Önce-Sonra” görüntülerini tek tek kontrol etmekten yoruldunuz mu?
UI Testing Inspector, tamamen yerel çalışan görsel diff aracı; piksel-pikselle karşılaştırma ve DOM/CSS analizini aynı raporda sunar.
Neden kullanmalısınız?
⚡ %100 Yerel & Özel – ekran görüntüleri ve diff verileri yalnızca bilgisayarınızda; bulut yok, veri paylaşımı yok
⚡ Anında Geri Bildirim – temel çizgiyi (baseline) alın, kodu değiştirin, “Compare” deyin; farkları anında görün
⚡ Piksel-Mükemmel Algılama – insan gözünün kaçırabileceği en ufak değişiklikleri bile yakalar
Öne Çıkan Özellikler
🔸 Tek Tıkla Baseline – istediğiniz sayfanın “önce” hâlini tek tıkla kaydeder
🔸 Pixel-Perfect Diff – Before / After / Diff görüntüleri tek raporda
🔸 Inspect Element – hangi DOM / CSS özelliği değişti, satır satır listeler
🔸 Viewport ↔ Full-page Yakalama
🔸 Rapor Geçmişi (14-15 önceki rapor)
🔸 Açık / Koyu Tema desteği
Detaylı Raporun İçindekiler
✔️ Özet: yüzde fark + eklenen/kaldırılan/değişen öğe sayıları
✔️ Yan Yana Görünüm: Before / After / Diff karşılaştırması
✔️ DOM & CSS Değişiklik Listesi: renk, font-boyut, margin vb. kod düzeyi farklar
Neleri Yakalarsınız
➤ Düzen kaymaları, hizalama hataları
➤ Renk ve stil değişiklikleri
➤ Eksik ya da taşınmış öğeler
➤ Yazı tipi / metin / görsel farkları
Nasıl Çalışır
1️⃣ Sayfayı açın, “Set Baseline” tıklayın
2️⃣ Kod / içerik / CSS’i dilediğinizce değiştirin
3️⃣ “Compare with Baseline” tıklayın, ayrıntılı diff raporu açılır
4️⃣ Yan Yana görünüm + Değişiklik Listesi ile hataları analiz edin
5️⃣ Yeni tasarım tamamsa “Set Baseline” ile referansı güncelleyin
Pro İpuçları ✨
Sayfa tam yüklenmeden baseline almayın
Kapsamlı testte Full-page Capture kullanın
Her seferinde aynı pencere boyutunda çekim yapın
İçerik sabitken baseline alın
Daha net sonuç için tek değişikliği test edin
Büyük refactor öncesi önemli baseline’ları kaydedin
Kullanım Senaryoları ✅
Görsel Regresyon Testi • UI/Tasarım Doğrulaması • CSS Refactoring • Front-end Test Work-flow’ları
Kimler İçin? ➡️ Front-end Geliştiricileri, QA Mühendisleri, UI/UX Tasarımcıları, Freelancer’lar ve Küçük Ekipler
Neden Öne Çıkıyor 🖼️ Manuel ekran görüntüsü kalabalığına son 📝 Öğrenme eğrisi = 0
SSS
❓ Değişiklikleri nasıl algılar?
💬 Çift yöntem – piksel-pikselle görsel karşılaştırma + yapısal DOM/CSS taraması.
❓ Verilerim güvende mi?
💬 Evet; tüm işlem ve saklama %100 yerelde, tarayıcınızda olur.
❓ Localhost’ta çalışır mı?
💬 Kesinlikle; yerel geliştirme sırasında da sorunsuzdur.
❓ Dinamik içerik?
💬 Statik durumları karşılaştırmak için tasarlandı; en iyi sonuç için animasyonlar bittiğinde çekim yapın.
ülerinizi yakalayın.
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.