CRX id
begcddgpiamjkanbgdcihlbfdmogcloo
begcddgpiamjkanbgdcihlbfdmogcloo
Description from extension meta
Lokalno vizualno regresijsko testiranje za web stranice - vizualno usporedite UI promjene i otkrijte DOM/CSS razlike bez oblaka
Image from store
Description from store
Umorni ste od ručnog provjeravanja vizualnih grešaka nakon svake promjene koda? UI Testing Inspector je vaš pouzdani lokalni provjera vizualnih razlika s DOM analizom.
Zašto ga koristiti?
⚡ 100% Lokalno i Privatno: sve snimke zaslona i podaci o usporedbi ostaju na vašem računalu. Nema usluga u oblaku, nema dijeljenja podataka
⚡ Trenutna povratna informacija: instalirajte proširenje, napravite osnovnu liniju, izvršite promjene u kodu i odmah vidite razlike. Savršeno za brze regresijske testove
⚡ Piksel-savršeno otkrivanje: uhvatite čak i najmanje vizualne promjene koje ljudsko oko može propustiti
Ključne značajke:
🔸 Osnovna linija jednim klikom: zabilježite "prije" stanje bilo koje web stranice jednim klikom
🔸 Piksel-savršene vizualne razlike: dobijte jasan izvještaj koji prikazuje osnovnu liniju, trenutno stanje i sliku koja ističe točne razlike
🔸 Pregled elementa: idite dalje od osnovnog pregleda. Vidite ne samo kod, već i što se promijenilo u DOM-u i CSS-u
🔸 Snimanje cijele stranice i vidnog polja: odaberite između snimanja vidljivog područja ili cijele stranice koja se može pomicati
🔸 Povijest izvještaja: spremite i pregledajte do 15 prethodnih izvještaja o usporedbi
🔸 Svijetle i tamne teme: za udobno gledanje, danju ili noću
Unatar detaljnog izvještaja
🔍 Nakon svake usporedbe dobijate sveobuhvatan izvještaj koji vam daje potpunu sliku:
✔️ Sažetak: postotak vizualne razlike i broj dodanih, uklonjenih i izmijenjenih elemenata
✔️ Usporedba jedan do jedan: usporedite snimke "Prije" i "Poslije" odmah pokraj istaknute slike "Razlike"
✔️ Popis promjena DOM-a i CSS-a: identificirajte točne elemente koji su se promijenili. Nema više nagađanja zašto se piksel pomaknuo - vidite promjene na razini koda poput boje, veličine fonta ili margine
Što ćete uhvatiti:
➤ Promjene raspoređa i pogrešna poravnanja
➤ Promjene boje i stila
➤ Nedostajuće ili pomjerene elemente
➤ Izmjene fonta i teksta
➤ Razlike slika
Kako to funkcioniše:
1️⃣ Postavite vizualnu osnovnu liniju: idite na stranicu koju želite testirati i kliknite "Postavi osnovnu liniju" u iskačućem prozoru proširenja. To je vaš izvor istine.
2️⃣ Kodirajte s povjerenjem: napravite promjene u vašem CSS-u, ažurirajte sadržaj ili refaktorite komponente.
3️⃣ Odmah provjerite promjene: kliknite "Usporedi s osnovnom linijom". Otvorit će se nova kartica s detaljnim vizualnim izvještajem.
4️⃣ Analizirajte razlike: koristite usporedbu jedan do jedan i popis otkrivenih promjena da identificirate svaki problem.
5️⃣ Ažurirajte osnovnu liniju: zadovoljni ste novom verzijom? Jednostavno kliknite "Postavi osnovnu liniju" ponovno da spremite novi izgled kao referencu.
Profesionalni savjeti
✨ Pričekajte da se učitavanje stranice završi prije snimanja osnovnih linija
✨ Koristite snimanje cijele stranice za sveobuhvatno testiranje
✨ Napravite snimke zaslona u istoj veličini prozora preglednika za točne usporedbe
✨ Snimite osnovne linije kad je sadržaj stabilan
✨ Testirajte jednu promjenu odjednom za jasnija razlikovna rezultata
✨ Spremite važne osnovne linije prije velikih refaktoriranja koda
✨ Usporedite slična stanja stranice (isti status prijave korisnika, učitani podaci)
Slučajevi korištenja
✅ Vizualno regresijsko testiranje: glavni slučaj korištenja. Nakon izvršavanja promjena, pokrenite usporedbu da uhvatite bilo koje neželjene vizualne greške.
✅ UI/dizajn provjera: osigurajte piksel-savršenu implementaciju i dosljednost brenda prema dizajnerskim maketima.
✅ CSS refaktoriranje: refaktorirajte naslijeđeni CSS bez straha. Brzi test vizualnih razlika odmah će vam reći imaju li vaše promjene neočekivane nuspojave.
✅ Frontend testiranje: bitan alat za bilo koji tijek rada frontend testiranja, pružajući trenutnu vizualnu povratnu informaciju.
Za koga je napravljen?
➡️ Frontend programeri: uhvatite probleme raspoređa prije predaje koda
➡️ QA inženjeri: poboljšajte svoje ručne UI testove pouzdanim korakom vizualne provjere
➡️ UI/UX dizajneri: brzo osigurajte da živa implementacija odgovara vašim dizajnima
➡️ Freelanceri i mali timovi: alat za vizualno testiranje bez korporacijske cjenovne etikete
Zašto se ističe
🖼️ Bolje od ručnih snimki zaslona: prestanite žongliranje s prije-i-poslije slikama u vašim mapama na radnoj površini
📝 Nula krivulje učenja: ako možete pregledavati, možete koristiti ovaj alat
Često postavljana pitanja
❓Kako otkriva promjene?
💬 Koristi pristup s dva metoda: usporedbu piksel po piksel za vizualnu razliku i strukturalno skeniranje za popis promjena DOM-a/CSS-a.
❓Jesu li moji podatci sigurni?
💬Da. Sve se obrađuje i pohranjuje 100% lokalno u vašem pregledniku.
❓Mogu li ga koristiti na localhost?
💬Apsolutno! Radi savršeno tijekom lokalnog razvoja
❓Što je s dinamičkim sadržajem?
💬 Alat je dizajniran za usporedbu statičkih stanja. Za najbolje rezultate, napravite snimke zaslona kad su animacije završene i oglasi stabilni.
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.