Description from extension meta
Porovnajte vizuálne zmeny pred a po aktualizácii webových stránok s podrobnými správami a DOM analýzou.
Image from store
Description from store
Unavení z manuálnej kontroly vizuálnych chýb po každej zmene kódu? UI Testing Inspector je váš spoľahlivý nástroj na kontrolu vizuálnych rozdielov s DOM analýzou.
Prečo ho používať?
⚡ 100 % Lokálne a súkromne: všetky snímky obrazovky a porovnávacie údaje zostávajú na vašom počítači – bez cloudu, bez zdieľania dát
⚡ Okamžitá spätná väzba: nainštalujte rozšírenie, vytvorte základnú líniu, upravte kód a rozdiely uvidíte hneď – ideálne na rýchle regresné testy
⚡ Pixel-dokonalé zistenie: zachytí aj najmenšie vizuálne zmeny, ktoré môže ľudské oko prehliadnuť
Hlavné funkcie
🔸 Základná línia jedným klikom – zachyťte stav „pred“ ľubovoľnej stránky jediným klikom
🔸 Pixel-dokonalý vizuálny rozdiel – jasný report so základnou líniou, aktuálnym stavom a zvýraznenými rozdielmi
🔸 Inšpekcia prvkov – sledujte zmeny v DOM a CSS, nielen v kóde
🔸 Zachytenie celej stránky alebo viewportu
🔸 História reportov – uloženie a prehliadanie až 15 predchádzajúcich porovnaní
🔸 Svetlá a tmavá téma – pohodlné sledovanie vo dne aj v noci
V podrobnom reporte
🔍 Po každom porovnaní:
✔️ Súhrn – % rozdielu a počet upravených prvkov
✔️ Vedľajšie zobrazenie – „Pred / Po“ a obrázok „Rozdiely“
✔️ Zoznam zmien DOM & CSS – farba, písmo, okraj a pod.
Čo zachytíte
➤ Posuny rozloženia a zarovnania
➤ Zmeny farieb a štýlov
➤ Chýbajúce alebo presunuté prvky
➤ Úpravy písma a textu
➤ Rozdiely v obrázkoch
Ako to funguje
1️⃣ Nastavte vizuálnu základnú líniu
2️⃣ Upraviť kód s istotou
3️⃣ Klik „Porovnať so základnou líniou“ – detailný report v novej karte
4️⃣ Analyzovať rozdiely, opraviť problémy
5️⃣ Aktualizovať základnú líniu po spokojnosti
Profi tipy
✨ Počkajte na plné načítanie stránky pred zachytením
✨ Použite zachytenie celej stránky pre komplexné testovanie
✨ Zachovajte rovnakú veľkosť okna pre presné porovnania
✨ Zachytávajte pri stabilnom obsahu
✨ Testujte jednu zmenu naraz pre jasné výsledky
✨ Uložte dôležité línie pred veľkými refaktoringmi
Prípady použitia
✅ Vizuálne regresné testovanie
✅ Overenie UI/dizajnu
✅ Nebojácne refaktorovanie CSS
✅ Front-end workflow s okamžitým vizuálnym feedbackom
Pre koho
➡️ Front-end vývojári • QA inžinieri • UI/UX dizajnéri • Freelanceri a malé tímy
Prečo sa vyníma
🖼️ Lepšie než manuálne screenshoty
📝 Nulová krivka učenia – jednoducho sa používa
FAQ
❓ Ako zisťuje zmeny?
💬 Porovnanie pixel-po-pixeli + štrukturálny sken DOM/CSS.
❓ Sú moje dáta v bezpečí?
💬 Áno – 100 % spracované a uložené lokálne v prehliadači.
❓ Funguje na localhoste?
💬 Samozrejme – ideálne pre lokálny vývoj.
❓ Čo s dynamickým obsahom?
💬 Porovnávajte statické stavy: snímajte po skončení animácií a stabilizácii reklám.
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.