CRX id
begcddgpiamjkanbgdcihlbfdmogcloo
begcddgpiamjkanbgdcihlbfdmogcloo
Description from extension meta
Vergleichen Sie visuelle Änderungen vor und nach der Aktualisierung von Webseiten mit detaillierten Berichten und DOM-Analyse.
Image from store
Description from store
Müde von der manuellen Überprüfung auf visuelle Fehler nach jeder Code-Änderung? UI Testing Inspector ist Ihr zuverlässiger visueller Differenz-Checker mit DOM-Analyse.
Warum verwenden?
⚡️ 100% Lokal & Privat: alle Screenshots und Vergleichsdaten bleiben auf Ihrem Computer. Keine Cloud-Services, keine Datenfreigabe
⚡️ Sofortige Feedback-Schleife: installieren Sie die Erweiterung, erstellen Sie eine Baseline, nehmen Sie Ihre Code-Änderungen vor und sehen Sie die Unterschiede sofort. Perfekt für schnelle Regressionstests
⚡️ Pixel-perfekte Erkennung: erfassen Sie selbst die kleinsten visuellen Änderungen, die das menschliche Auge übersehen könnte
Hauptfunktionen:
🔸 Ein-Klick-Baseline: erfassen Sie den "Vorher"-Zustand jeder Webseite mit einem einzigen Klick
🔸 Pixel-perfekter visueller Diff: erhalten Sie einen klaren Bericht, der die Baseline, den aktuellen Zustand und ein Bild zeigt, das die genauen Unterschiede hervorhebt
🔸 Element inspizieren: gehen Sie über den grundlegenden Inspektor hinaus. Sehen Sie nicht nur den Code, sondern auch was sich im DOM und CSS geändert hat
🔸 Vollseiten- und Viewport-Erfassung: wählen Sie zwischen der Erfassung des sichtbaren Bereichs oder der gesamten scrollbaren Seite
🔸 Berichtsverlauf: speichern und überprüfen Sie bis zu 15 vorherige Vergleichsberichte
🔸 Helle & dunkle Themes: für komfortables Betrachten, Tag oder Nacht
Im detaillierten Bericht
🔍 Nach jedem Vergleich erhalten Sie einen umfassenden Bericht, der Ihnen das vollständige Bild gibt:
✔️ Zusammenfassung: der Prozentsatz der visuellen Unterschiede und eine Anzahl der hinzugefügten, entfernten und geänderten Elemente
✔️ Nebeneinander-Ansicht: vergleichen Sie "Vorher"- und "Nachher"-Screenshots direkt neben dem hervorgehobenen "Unterschiede"-Bild
✔️ DOM & CSS Änderungsliste: identifizieren Sie die genauen Elemente, die sich geändert haben. Kein Raten mehr, warum sich ein Pixel bewegt hat - sehen Sie die Code-Level-Änderungen wie Farbe, Schriftgröße oder Rand
✔️ Technische Details: umfassende Analyse von Layout-Änderungen, Inhaltsmodifikationen und strukturellen Updates
Was Sie erfassen werden:
➤ Layout-Verschiebungen und Fehlausrichtungen
➤ Farb- und Stiländerungen
➤ Fehlende oder verschobene Elemente
➤ Schrift- und Textmodifikationen
➤ Bildunterschiede
Wie es funktioniert:
1️⃣ Visuelle Baseline setzen: navigieren Sie zu der Seite, die Sie testen möchten, und klicken Sie auf "Baseline setzen" im Erweiterungs-Popup. Das ist Ihre Quelle der Wahrheit.
2️⃣ Codieren Sie mit Vertrauen: nehmen Sie Änderungen an Ihrem CSS vor, aktualisieren Sie Inhalte oder refaktorieren Sie Komponenten.
3️⃣ Sofort auf Änderungen prüfen: klicken Sie auf "Mit Baseline vergleichen". Ein neuer Tab öffnet sich mit einem detaillierten visuellen Bericht.
4️⃣ Unterschiede analysieren: verwenden Sie die Nebeneinander-Ansicht und die Liste der erkannten Änderungen, um jedes Problem zu erkennen.
5️⃣ Baseline aktualisieren: zufrieden mit der neuen Version? Klicken Sie einfach erneut auf "Baseline setzen", um das neue Aussehen als Ihre Referenz zu speichern.
Profi-Tipps
✨ Warten Sie, bis Seiten vollständig geladen sind, bevor Sie Baselines erfassen
✨ Verwenden Sie die Vollseiten-Erfassung für umfassende Tests
✨ Machen Sie Screenshots in derselben Browser-Fenstergröße für genaue Vergleiche
✨ Erfassen Sie Baselines, wenn der Inhalt stabil ist
✨ Testen Sie eine Änderung nach der anderen für klarere Diff-Ergebnisse
✨ Speichern Sie wichtige Baselines vor größeren Code-Refaktorierungen
✨ Vergleichen Sie ähnliche Seitenzustände (gleicher Benutzer-Login-Status, geladene Daten)
Anwendungsfälle
✅ Visueller Regressionstest: der Haupt-Anwendungsfall. Nach Änderungen führen Sie einen Vergleich durch, um unbeabsichtigte visuelle Fehler zu erfassen.
✅ UI/Design-Verifizierung: stellen Sie pixel-perfekte Implementierung und Markenkonsistenz gegen Design-Mockups sicher.
✅ CSS-Refaktorierung: refaktorieren Sie Legacy-CSS furchtlos. Ein schneller visueller Diff-Test wird Ihnen sofort sagen, ob Ihre Änderungen unerwartete Nebenwirkungen hatten.
✅ Frontend-Tests: ein wesentliches Tool für jeden Frontend-Test-Workflow, das sofortiges visuelles Feedback liefert.
Für wen ist es gemacht?
➡️ Frontend-Entwickler: erfassen Sie Layout-Probleme, bevor Sie Ihren Code committen
➡️ QA-Ingenieure: verbessern Sie Ihre manuellen UI-Tests mit einem zuverlässigen visuellen Verifikationsschritt
➡️ UI/UX-Designer: stellen Sie schnell sicher, dass die Live-Implementierung Ihren Designs entspricht
➡️ Freelancer & kleine Teams: ein visuelles Test-Tool ohne den Unternehmens-Preisschild
Warum es heraussticht
🖼️ Besser als manuelle Screenshots: hören Sie auf, mit Vorher- und Nachher-Bildern in Ihren Desktop-Ordnern zu jonglieren
📝 Null Lernkurve: wenn Sie browsen können, können Sie dieses Tool verwenden
FAQ
❓Wie erkennt es Änderungen?
💬 Es verwendet einen Zwei-Methoden-Ansatz: Pixel-für-Pixel-Vergleich für visuellen Diff und strukturelles Scannen für DOM/CSS-Änderungsliste.
❓Sind meine Daten sicher?
💬 Ja. Alles wird 100% lokal in Ihrem Browser verarbeitet und gespeichert.
❓Kann ich es auf localhost verwenden?
💬 Absolut! Es funktioniert perfekt während der lokalen Entwicklung.
❓Was ist mit dynamischen Inhalten?
💬 Das Tool ist darauf ausgelegt, statische Zustände zu vergleichen. Für beste Ergebnisse erfassen Sie Ihre Screenshots, wenn Animationen abgeschlossen und Anzeigen stabil sind.
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.