CRX id
begcddgpiamjkanbgdcihlbfdmogcloo
begcddgpiamjkanbgdcihlbfdmogcloo
Description from extension meta
Hasonlítsa össze a vizuális változásokat a weboldalak frissítése előtt és után részletes jelentésekkel és DOM elemzéssel.
Image from store
Description from store
Belefáradt a vizuális hibák kézi ellenőrzésébe minden kódváltoztatás után? A UI Testing Inspector az Ön megbízható vizuális különbség-ellenőrző eszköze DOM elemzéssel.
Miért használja?
⚡️ 100% Helyi és Privát: minden képernyőkép és összehasonlítási adat a számítógépén marad. Nincsenek felhőszolgáltatások, nincs adatmegosztás
⚡️ Azonnali Visszacsatolási Hurok: telepítse a bővítményt, hozzon létre alapvonalat, végezze el a kódváltoztatásokat és azonnal lássa a különbségeket. Tökéletes a gyors regressziós tesztekhez
⚡️ Pixelpontos Észlelés: még a legkisebb vizuális változásokat is megragadja, amelyeket az emberi szem kihagyhat
Fő Funkciók:
🔸 Egy Kattintásos Alapvonal: egy kattintással rögzítse bármely weboldal "előtte" állapotát
🔸 Pixelpontos Vizuális Különbség: kapjon világos jelentést, amely mutatja az alapvonalat, a jelenlegi állapotot és egy képet, amely kiemeli a pontos különbségeket
🔸 Elem Vizsgálat: menjen túl az alapvető felügyelőn. Ne csak a kódot lássa, hanem azt is, hogy mi változott a DOM-ban és CSS-ben
🔸 Teljes Oldal és Nézetablak Rögzítés: válasszon a látható terület vagy a teljes görgethető oldal rögzítése között
🔸 Jelentés Előzmények: mentsen és tekintsen át akár 15 korábbi összehasonlítási jelentést
🔸 Világos és Sötét Témák: kényelmes megtekintéshez, nappal vagy éjjel
A Részletes Jelentésen Belül
🔍 Minden összehasonlítás után átfogó jelentést kap, amely a teljes képet adja:
✔️ Összefoglaló: a vizuális eltérések százaléka és a hozzáadott, eltávolított és módosított elemek száma
✔️ Egymás Melletti Nézet: hasonlítsa össze az "Előtte" és "Utána" képernyőképeket a kiemelt "Különbségek" kép mellett
✔️ DOM és CSS Változáslista: pontosan azonosítsa, mely elemek változtak meg. Nincs több találgatás, hogy miért mozdult el egy pixel - lássa a kódszintű változásokat, mint szín, betűméret vagy margó
✔️ Technikai Részletek: az elrendezési változások, tartalommodosítások és strukturális frissítések átfogó elemzése
Amit Meg Fog Ragadni:
➤ Elrendezési eltolódások és igazítási hibák
➤ Szín- és stílusváltozások
➤ Hiányzó vagy elmozgatott elemek
➤ Betűtípus és szöveg módosítások
➤ Képkülönbségek
Hogyan Működik:
1️⃣ Vizuális Alapvonal Beállítása: navigáljon a tesztelni kívánt oldalra és kattintson az "Alapvonal Beállítása" gombra a bővítmény felugró ablakában. Ez az Ön igazságának forrása.
2️⃣ Kódolás Magabiztosan: végezzen változtatásokat a CSS-ben, frissítse a tartalmat vagy refaktorálja a komponenseket.
3️⃣ Változások Azonnali Ellenőrzése: kattintson az "Összehasonlítás Alapvonallal" gombra. Egy új lap nyílik meg részletes vizuális jelentéssel.
4️⃣ Különbségek Elemzése: használja az egymás melletti nézetet és az észlelt változások listáját minden probléma azonosításához.
5️⃣ Alapvonal Frissítése: elégedett az új verzióval? Egyszerűen kattintson újra az "Alapvonal Beállítása" gombra az új megjelenés referenciaként való mentéséhez.
Professzionális Tippek
✨ Várja meg, amíg az oldalak teljesen betöltődnek az alapvonalak rögzítése előtt
✨ Használjon teljes oldal rögzítést átfogó teszteléshez
✨ Készítsen képernyőképeket ugyanolyan böngésző ablakméretben a pontos összehasonlításokhoz
✨ Rögzítse az alapvonalakat, amikor a tartalom stabil
✨ Teszteljen egyszerre egy változtatást a tisztább különbség eredményekért
✨ Mentse a fontos alapvonalakat nagy kód-refaktorálás előtt
✨ Hasonlítsa össze a hasonló oldal állapotokat (ugyanaz a felhasználói bejelentkezési állapot, betöltött adatok)
Használati Esetek
✅ Vizuális Regressziós Tesztelés: a fő használati eset. Változtatások után futtasson összehasonlítást a nem szándékos vizuális hibák megragadásához.
✅ UI/Design Ellenőrzés: biztosítsa a pixelpontos implementációt és márka konzisztenciát a design makettekkel szemben.
✅ CSS Refaktorálás: refaktorálja a régi CSS-t félelem nélkül. Egy gyors vizuális különbség teszt azonnal megmondja, hogy a változtatásainak voltak-e váratlan mellékhatásai.
✅ Frontend Tesztelés: alapvető eszköz bármely frontend tesztelési munkafolyamathoz, azonnali vizuális visszacsatolást biztosítva.
Kinek Készült?
➡️ Frontend Fejlesztők: ragadja meg az elrendezési problémákat a kód commitolása előtt
➡️ QA Mérnökök: javítsa kézi UI tesztjeit megbízható vizuális ellenőrzési lépéssel
➡️ UI/UX Tervezők: gyorsan ellenőrizze, hogy az élő implementáció megfelel-e a tervezésének
➡️ Szabadúszók és Kis Csapatok: vizuális tesztelő eszköz vállalati árcédula nélkül
Miért Kiemelkedő
🖼️ Jobb, Mint a Kézi Képernyőképek: hagyja abba az előtte és utána képek zsonglőrködését az asztali mappáiban
📝 Nulla Tanulási Görbe: ha tud böngészni, akkor tudja használni ezt az eszközt
Gyakran Ismételt Kérdések
❓Hogyan észleli a változásokat?
💬 Kettős módszertani megközelítést használ: pixel-pixelhez összehasonlítás a vizuális különbséghez és strukturális szkennelés a DOM/CSS változáslista számára.
❓Biztonságosak az adataim?
💬 Igen. Minden 100%-ban helyileg kerül feldolgozásra és tárolásra a böngészőjében.
❓Használhatom ezt localhost-on?
💬 Természetesen! Tökéletesen működik helyi fejlesztés során.
❓Mi a helyzet a dinamikus tartalommal?
💬 Az eszköz statikus állapotok összehasonlítására készült. A legjobb eredményekért rögzítse a képernyőképeket, amikor az animációk befejeződtek és a hirdetések stabilak.
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.