CRX id
begcddgpiamjkanbgdcihlbfdmogcloo
begcddgpiamjkanbgdcihlbfdmogcloo
Description from extension meta
Sammenlign visuelle ændringer før og efter opdatering af websider med detaljerede rapporter og DOM-analyse.
Image from store
Description from store
Træt af manuelt at tjekke visuelle fejl efter hver kodeændring? UI Testing Inspector er dit pålidelige visuelle forskel-kontrolværktøj med DOM-analyse.
Hvorfor bruge det?
⚡️ 100% Lokalt og Privat: alle skærmbilleder og sammenligningsdata forbliver på din computer. Ingen cloud-tjenester, ingen datadeling
⚡️ Øjeblikkelig Feedback-loop: installer udvidelsen, opret baseline, foretag dine kodeændringer og se forskelle øjeblikkeligt. Perfekt til hurtige regressionstests
⚡️ Pixel-perfekt Detektion: fang selv de mindste visuelle ændringer, som det menneskelige øje måtte overse
Hoved Funktioner:
🔸 Baseline med Et Klik: fang "før" tilstanden af enhver webside med et klik
🔸 Pixel-perfekt Visuel Forskel: få en klar rapport, der viser baseline, nuværende tilstand og et billede, der fremhæver de nøjagtige forskelle
🔸 Element Inspektion: gå ud over den grundlæggende inspektor. Se ikke kun koden, men også hvad der er ændret i DOM og CSS
🔸 Fuld Side og Viewport Optagelse: vælg mellem at fange det synlige område eller hele den scrollbare side
🔸 Rapport Historik: gem og gennemgå op til 15 tidligere sammenligningsrapporter
🔸 Lys og Mørke Temaer: til behagelig visning, dag eller nat
Inde i den Detaljerede Rapport
🔍 Efter hver sammenligning får du en omfattende rapport, der giver dig det fulde billede:
✔️ Resumé: procent af visuelle forskelle og antal tilføjede, fjernede og modificerede elementer
✔️ Side-ved-side Visning: sammenlign "Før" og "Efter" skærmbilleder ved siden af det fremhævede "Forskelle" billede
✔️ DOM og CSS Ændringsliste: identificér præcist hvilke elementer der er ændret. Ikke mere gætteri om hvorfor en pixel flyttede sig - se kodeniveau-ændringer som farve, skriftstørrelse eller margin
✔️ Tekniske Detaljer: omfattende analyse af layout-ændringer, indholdsmodifikationer og strukturelle opdateringer
Hvad Du Vil Fange:
➤ Layout-skift og justeringsfejl
➤ Farve- og stilændringer
➤ Manglende eller flyttede elementer
➤ Skrift- og tekstmodifikationer
➤ Billedforskelle
Hvordan Det Virker:
1️⃣ Indstil Visuel Baseline: naviger til siden du vil teste og klik "Indstil Baseline" i udvidelsens popup. Dette er din kilde til sandhed.
2️⃣ Kod med Selvtillid: foretag ændringer i din CSS, opdater indhold eller refactor komponenter.
3️⃣ Tjek Ændringer Øjeblikkeligt: klik "Sammenlign med Baseline". En ny fane åbner med en detaljeret visuel rapport.
4️⃣ Analyser Forskelle: brug side-ved-side visningen og listen over opdagede ændringer til at identificere hvert problem.
5️⃣ Opdater Baseline: tilfreds med den nye version? Klik bare "Indstil Baseline" igen for at gemme det nye udseende som din reference.
Professionelle Tips
✨ Vent på at sider indlæses fuldstændigt før optagelse af baselines
✨ Brug fuld side-optagelse til omfattende test
✨ Tag skærmbilleder i samme browserstørrelse for nøjagtige sammenligninger
✨ Optag baselines når indholdet er stabilt
✨ Test én ændring ad gangen for klarere forskelsresultater
✨ Gem vigtige baselines før store kode-refactorings
✨ Sammenlign lignende sidetilstande (samme brugerlogin-status, indlæst data)
Brugstilfælde
✅ Visuel Regressionstestning: hovedbrugstilfældet. Efter at have foretaget ændringer, kør en sammenligning for at fange utilsigtede visuelle fejl.
✅ UI/Design Verifikation: sikrer pixel-perfekt implementering og brand-konsistens mod design-mockups.
✅ CSS Refactoring: refactor legacy CSS uden frygt. En hurtig visuel forskel-test vil øjeblikkeligt fortælle dig om dine ændringer havde uventede bivirkninger.
✅ Frontend Testing: et essentielt værktøj til enhver frontend test-workflow, der giver øjeblikkelig visuel feedback.
Hvem Det Er Bygget Til?
➡️ Frontend Udviklere: fang layout-problemer før du committer din kode
➡️ QA Ingeniører: forbedre dine manuelle UI tests med et pålidelig visuelt verifikationstrin
➡️ UI/UX Designere: verificer hurtigt at live-implementeringen matcher dine designs
➡️ Freelancere og Små Teams: et visuelt testværktøj uden virksomhedsprisskiltet
Hvorfor Det Skiller Sig Ud
🖼️ Bedre End Manuelle Skærmbilleder: stop med at jonglere før og efter billeder i dine skrivebordsmapper
📝 Nul Læringskurve: hvis du kan browse, kan du bruge dette værktøj
Oftest Stillede Spørgsmål
❓Hvordan opdager det ændringer?
💬 Bruger en dobbelt metodologisk tilgang: pixel-for-pixel sammenligning for visuel forskel og strukturel scanning for DOM/CSS ændringsliste.
❓Er mine data sikre?
💬 Ja. Alt bliver behandlet og gemt 100% lokalt i din browser.
❓Kan jeg bruge dette på localhost?
💬 Absolut! Det virker perfekt under lokal udvikling.
❓Hvad med dynamisk indhold?
💬 Værktøjet er designet til at sammenligne statiske tilstande. For bedste resultater, tag dine skærmbilleder når animationer er færdige og annoncer er stabile.
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.