CRX id
begcddgpiamjkanbgdcihlbfdmogcloo
begcddgpiamjkanbgdcihlbfdmogcloo
Description from extension meta
Porovnávejte vizuální změny před a po aktualizaci webových stránek s podrobnými přehledy a DOM analýzou.
Image from store
Description from store
Unaveni ručním kontrolováním vizuálních chyb po každé změně kódu? UI Testing Inspector je váš spolehlivý nástroj pro kontrolu vizuálních rozdílů s DOM analýzou.
Proč používat?
⚡️ 100% Lokálně a Soukromě: všechny snímky obrazovky a data porovnání zůstávají na vašem počítači. Žádné cloudové služby, žádné sdílení dat
⚡️ Okamžitá Zpětnovazební Smyčka: nainstalujte rozšíření, vytvořte základní linii, proveďte změny kódu a okamžitě vidět rozdíly. Perfektní pro rychlé regresní testy
⚡️ Pixelově Přesné Detekce: zachyťte i nejmenší vizuální změny, které může lidské oko přehlédnout
Hlavní Funkce:
🔸 Základní Linie Jedním Kliknutím: zachyťte "před" stav jakékoli webové stránky jedním kliknutím
🔸 Pixelově Přesný Vizuální Rozdíl: získejte jasný přehled ukazující základní linii, aktuální stav a obrázek zvýrazňující přesné rozdíly
🔸 Inspekce Prvků: jděte za základní inspektor. Vidět nejen kód, ale také co se změnilo v DOM a CSS
🔸 Zachycení Celé Stránky a Výřezu: vyberte si mezi zachycením viditelné oblasti nebo celé posuvné stránky
🔸 Historie Přehledů: uložte a zkontrolujte až 15 předchozích srovnávacích přehledů
🔸 Světlé a Tmavé Motivy: pro pohodlné prohlížení ve dne i v noci
Vnitř Podrobného Přehledu
🔍 Po každém porovnání získáte komplexní přehled, který vám poskytne úplný obraz:
✔️ Shrnutí: procento vizuálních rozdílů a počet přidaných, odstraněných a upravených prvků
✔️ Zobrazení Vedle Sebe: porovnejte snímky obrazovky "Před" a "Po" vedle zvýrazněného obrázku "Rozdíly"
✔️ Seznam Změn DOM a CSS: přesně identifikujte, které prvky se změnily. Už žádné hádání, proč se pixel posunul - vidět změny na úrovni kódu jako barva, velikost písma nebo okraj
✔️ Technické Podrobnosti: komplexní analýza změn rozvržení, úprav obsahu a strukturálních aktualizací
Co Zachytíte:
➤ Posuny rozvržení a chyby zarovnání
➤ Změny barev a stylů
➤ Chybějící nebo přesunuté prvky
➤ Úpravy písma a textu
➤ Rozdíly obrázků
Jak to Funguje:
1️⃣ Nastavit Vizuální Základní Linii: přejděte na stránku, kterou chcete testovat, a klikněte na "Nastavit Základní Linii" v pop-upu rozšíření. To je váš zdroj pravdy.
2️⃣ Kódovat s Důvěrou: proveďte změny ve svém CSS, aktualizujte obsah nebo refaktorujte komponenty.
3️⃣ Okamžitě Zkontrolovat Změny: klikněte na "Porovnat se Základní Linií". Otevře se nová záložka s podrobným vizuálním přehledem.
4️⃣ Analyzovat Rozdíly: použijte zobrazení vedle sebe a seznam zjištěných změn k identifikaci každého problému.
5️⃣ Aktualizovat Základní Linii: spokojeni s novou verzí? Jednoduše znovu klikněte na "Nastavit Základní Linii" pro uložení nového vzhledu jako vaší reference.
Profesionální Tipy
✨ Počkejte na úplné načtení stránek před zachycením základních linií
✨ Používejte zachycení celé stránky pro komplexní testování
✨ Pořizujte snímky obrazovky ve stejné velikosti okna prohlížeče pro přesné porovnání
✨ Zachyťte základní linie, když je obsah stabilní
✨ Testujte jednu změnu najednou pro jasnější výsledky rozdílů
✨ Uložte důležité základní linie před velkými refaktoringy kódu
✨ Porovnávejte podobné stavy stránek (stejný stav přihlášení uživatele, načtená data)
Příklady Použití
✅ Vizuální Regresní Testování: hlavní příklad použití. Po provedení změn spusťte porovnání pro zachycení jakýchkoli neúmyslných vizuálních chyb.
✅ Ověření UI/Designu: zajistěte pixelově přesnou implementaci a konzistentnost značky oproti designovým maketám.
✅ CSS Refaktoring: refaktorujte starší CSS bez obav. Rychlý test vizuálních rozdílů vám okamžitě řekne, zda vaše změny měly nějaké neočekávané vedlejší účinky.
✅ Frontend Testování: základní nástroj pro jakýkoli workflow frontend testování, poskytující okamžitou vizuální zpětnou vazbu.
Pro Koho Je Vytvořen?
➡️ Frontend Vývojáři: zachyťte problémy s rozvržením před odevzdáním vašeho kódu
➡️ QA Inženýři: vylepšete své manuální UI testy spolehlivým krokem vizuálního ověření
➡️ UI/UX Designéři: rychle ověřte, že živá implementace odpovídá vašim designům
➡️ Freelanceři a Malé Týmy: nástroj pro vizuální testování bez firemního ceníku
Proč Vyniká
🖼️ Lepší Než Manuální Snímky Obrazovky: přestaňte žonglovat s obrázky před a po ve vašich složkách na ploše
📝 Nulová Učební Křivka: pokud umíte procházet, můžete použít tento nástroj
Často Kladené Otázky
❓Jak detekuje změny?
💬 Používá dvojí metodický přístup: pixelové porovnání pro vizuální rozdíl a strukturální skenování pro seznam změn DOM/CSS.
❓Jsou moje data bezpečná?
💬 Ano. Vše je zpracováváno a ukládáno 100% lokálně ve vašem prohlížeči.
❓Mohu to použít na localhost?
💬 Absolutně! Funguje to perfektně během lokálního vývoje.
❓Co s dynamickým obsahem?
💬 Nástroj je navržen pro porovnávání statických stavů. Pro nejlepší výsledky zachyťte své snímky obrazovky, když jsou animace dokončeny a reklamy stabilní.
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.