CRX id
begcddgpiamjkanbgdcihlbfdmogcloo
begcddgpiamjkanbgdcihlbfdmogcloo
Description from extension meta
Vergelijk visuele veranderingen voor en na het updaten van webpagina's met gedetailleerde rapporten en DOM-analyse.
Image from store
Description from store
Moe van het handmatig controleren op visuele bugs na elke codewijziging? UI Testing Inspector is uw betrouwbare visuele verschilcontroleur met DOM-analyse.
Waarom gebruiken?
⚡️ 100% Lokaal & Privé: alle screenshots en vergelijkingsgegevens blijven op uw computer. Geen cloudservices, geen gegevensuitwisseling
⚡️ Directe Feedbackloop: installeer de extensie, maak een baseline, breng uw codewijzigingen aan en zie direct de verschillen. Perfect voor snelle regressietests
⚡️ Pixelperfecte Detectie: vang zelfs de kleinste visuele veranderingen op die menselijke ogen kunnen missen
Hoofdfuncties:
🔸 Eén-Klik Baseline: leg de "voor" staat van elke webpagina vast met één klik
🔸 Pixelperfecte Visuele Diff: krijg een duidelijk rapport dat de baseline, huidige staat en een afbeelding toont die de exacte verschillen benadrukt
🔸 Element Inspectie: ga verder dan de basis inspector. Zie niet alleen de code, maar ook wat er is veranderd in DOM en CSS
🔸 Volledige Pagina & Viewport Vastleggen: kies tussen het vastleggen van het zichtbare gebied of de gehele scrollbare pagina
🔸 Rapportgeschiedenis: bewaar en bekijk tot 15 vorige vergelijkingsrapporten
🔸 Lichte & Donkere Thema's: voor comfortabel bekijken, dag of nacht
Binnen het Gedetailleerde Rapport
🔍 Na elke vergelijking krijgt u een uitgebreid rapport dat u het complete plaatje geeft:
✔️ Samenvatting: het percentage visuele verschillen en een telling van toegevoegde, verwijderde en gewijzigde elementen
✔️ Zij-aan-Zij Weergave: vergelijk "Voor" en "Na" screenshots naast de gemarkeerde "Verschillen" afbeelding
✔️ DOM & CSS Wijzigingslijst: identificeer precies welke elementen zijn veranderd. Geen gissing meer waarom een pixel is verschoven - zie codewijzigingen zoals kleur, lettergrootte of marge
✔️ Technische Details: uitgebreide analyse van lay-outwijzigingen, inhoudsmodificaties en structurele updates
Wat U Zult Vastleggen:
➤ Lay-outverschuivingen en uitlijningsfouten
➤ Kleur- en stijlveranderingen
➤ Ontbrekende of verplaatste elementen
➤ Lettertype- en tekstwijzigingen
➤ Afbeeldingsverschillen
Hoe Het Werkt:
1️⃣ Stel een Visuele Baseline In: navigeer naar de pagina die u wilt testen en klik op "Baseline Instellen" in de extensie popup. Dit is uw bron van waarheid.
2️⃣ Codeer met Vertrouwen: breng wijzigingen aan in uw CSS, werk content bij of refactor componenten.
3️⃣ Controleer Wijzigingen Direct: klik op "Vergelijk met Baseline". Een nieuw tabblad opent met een gedetailleerd visueel rapport.
4️⃣ Analyseer de Verschillen: gebruik de zij-aan-zij weergave en de lijst met gedetecteerde wijzigingen om elk probleem te identificeren.
5️⃣ Update de Baseline: tevreden met de nieuwe versie? Klik gewoon opnieuw op "Baseline Instellen" om het nieuwe uiterlijk als uw referentie op te slaan.
Professionele Tips
✨ Wacht tot pagina's volledig zijn geladen voordat u baselines vastlegt
✨ Gebruik volledige paginaregistratie voor uitgebreide tests
✨ Maak screenshots in dezelfde browservenstergrootte voor nauwkeurige vergelijkingen
✨ Leg baselines vast wanneer content stabiel is
✨ Test één wijziging tegelijk voor duidelijkere diff-resultaten
✨ Bewaar belangrijke baselines voordat u grote code-refactors doet
✨ Vergelijk vergelijkbare paginatoestanden (zelfde gebruikerslogin status, geladen data)
Gebruiksgevallen
✅ Visuele Regressietest: het hoofdgebruik. Na het maken van wijzigingen, voer een vergelijking uit om onbedoelde visuele bugs te vangen.
✅ UI/Design Verificatie: zorg voor pixelperfecte implementatie en merkconsistentie tegen ontwerpmockups.
✅ CSS Refactoring: refactor legacy CSS zonder angst. Een snelle visuele diff test vertelt u onmiddellijk of uw wijzigingen onverwachte bijeffecten hadden.
✅ Frontend Testing: een essentieel hulpmiddel voor elke frontend testworkflow, dat directe visuele feedback biedt.
Voor Wie Is Het Gebouwd?
➡️ Frontend Ontwikkelaars: vang lay-outproblemen op voordat u uw code commit
➡️ QA Engineers: verbeter uw handmatige UI-tests met een betrouwbare visuele verificatiestap
➡️ UI/UX Designers: zorg er snel voor dat de live implementatie overeenkomt met uw ontwerpen
➡️ Freelancers & Kleine Teams: een visueel testinstrument zonder het enterprise prijskaartje
Waarom Het Uitblinkt
🖼️ Beter Dan Handmatige Screenshots: stop met het jongleren met voor- en na-afbeeldingen in uw desktopmappen
📝 Nul Leercurve: als u kunt browsen, kunt u dit hulpmiddel gebruiken
Veelgestelde Vragen
❓Hoe detecteert het wijzigingen?
💬 Het gebruikt een dubbele methode benadering: een pixel-voor-pixel vergelijking voor de visuele diff en een structurele scan voor de DOM/CSS wijzigingslijst.
❓Zijn mijn gegevens veilig?
💬 Ja. Alles wordt 100% lokaal verwerkt en opgeslagen in uw browser.
❓Kan ik het gebruiken op localhost?
💬 Absoluut! Het werkt perfect tijdens lokale ontwikkeling.
❓Hoe zit het met dynamische content?
💬 Het hulpmiddel is ontworpen om statische toestanden te vergelijken. Voor de beste resultaten, leg uw screenshots vast wanneer animaties voltooid zijn en advertenties stabiel zijn.
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.