CRX id
begcddgpiamjkanbgdcihlbfdmogcloo
begcddgpiamjkanbgdcihlbfdmogcloo
Description from extension meta
Test de regressió visual local per a llocs web - compareu visualment els canvis de la UI i detecteu diferències DOM/CSS sense núvol
Image from store
Description from store
Cansat de comprovar errors visuals manualment després de cada canvi de codi? UI Testing Inspector és el vostre verificador de diferències visuals local de confiança amb anàlisi DOM.
Per què utilitzar-lo?
⚡ 100% Local i Privat: totes les captures de pantalla i dades de comparació romanen al vostre ordinador. Sense serveis al núvol, sense compartir dades
⚡ Retroalimentació Instantània: instal·leu l'extensió, preneu una línia base, feu canvis de codi i vegeu les diferències immediatament. Perfecte per a tests de regressió ràpids
⚡ Detecció Pixel-Perfecta: captureu fins i tot els canvis visuals més petits que l'ull humà podria perdre
Característiques Principals:
🔸 Línia Base d'Un Clic: captureu l'estat "abans" de qualsevol pàgina web amb un clic
🔸 Diferències Visuals Pixel-Perfectes: obteniu un informe clar que mostra la línia base, l'estat actual i una imatge que ressalta les diferències exactes
🔸 Inspeccionar Element: aneu més enllà de l'inspector bàsic. Veieu no només el codi, sinó també què ha canviat al DOM i CSS
🔸 Captura de Pàgina Completa i Àrea de Visualització: trieu entre capturar l'àrea visible o la pàgina sencera desplaçable
🔸 Historial d'Informes: deseu i reviseu fins a 15 informes de comparació anteriors
🔸 Temes Clar i Fosc: per a visualització còmoda, de dia o de nit
Dins de l'Informe Detallat
🔍 Després de cada comparació, obteniu un informe complet que proporciona la imatge completa:
✔️ Resum: percentatge de diferència visual i recompte d'elements afegits, eliminats i modificats
✔️ Vista Costat a Costat: compareu captures de pantalla "Abans" i "Després" just al costat de la imatge "Diferències" ressaltada
✔️ Llista de Canvis DOM i CSS: identifiqueu els elements exactes que han canviat. No més endevinar per què es va moure un píxel - veieu canvis a nivell de codi com color, mida de font o marge
Què capturareu:
➤ Desplaçaments de disseny i desalineacions
➤ Canvis de color i estil
➤ Elements perduts o moguts
➤ Modificacions de font i text
➤ Diferències d'imatge
Com Funciona:
1️⃣ Establiu la Línia Base Visual: navegueu a la pàgina que voleu provar i feu clic a "Establir Línia Base" a la finestra emergent de l'extensió. Aquesta és la vostra font de veritat.
2️⃣ Codifiqueu amb Confiança: feu canvis al vostre CSS, actualitzeu contingut o refactoritzeu components.
3️⃣ Comproveu els Canvis Instantàniament: feu clic a "Comparar amb Línia Base". S'obrirà una nova pestanya amb un informe visual detallat.
4️⃣ Analitzeu les Diferències: utilitzeu la vista costat a costat i la llista de canvis detectats per identificar cada problema.
5️⃣ Actualitzeu la Línia Base: satisfet amb la nova versió? Simplement feu clic a "Establir Línia Base" altra vegada per desar la nova aparença com a referència.
Consells Professionals
✨ Espereu que la càrrega de la pàgina estigui completa abans de capturar línies base
✨ Utilitzeu la captura de pàgina completa per a tests exhaustius
✨ Preneu captures de pantalla amb la mateixa mida de finestra del navegador per comparacions precises
✨ Captureu línies base quan el contingut sigui estable
✨ Proveu un canvi alhora per a resultats de diferències més clars
✨ Deseu línies base importants abans de grans refactoritzacions de codi
✨ Compareu estats de pàgina similars (mateix estat d'inici de sessió d'usuari, dades carregades)
Casos d'Ús
✅ Test de Regressió Visual: cas d'ús principal. Després de fer canvis, executeu una comparació per capturar qualsevol error visual no desitjat.
✅ Verificació UI/Disseny: assegureu implementació pixel-perfecta i consistència de marca contra maquetes de disseny.
✅ Refactorització CSS: refactoritzeu CSS heretat sense por. Un test ràpid de diferències visuals us dirà immediatament si els vostres canvis van tenir efectes secundaris inesperats.
✅ Test Frontend: eina essencial per a qualsevol flux de treball de test frontend, proporcionant retroalimentació visual instantània.
Per a Qui Està Construït?
➡️ Desenvolupadors Frontend: captureu problemes de disseny abans de confirmar el vostre codi
➡️ Enginyers QA: milloreu els vostres tests UI manuals amb un pas de verificació visual fiable
➡️ Dissenyadors UI/UX: assegureu-vos ràpidament que la implementació en viu coincideix amb els vostres dissenys
➡️ Freelancers i Equips Petits: eina de test visual sense etiqueta de preu corporatiu
Per Què Destaca
🖼️ Millor que Captures de Pantalla Manuals: atureu de fer malabars amb imatges abans-i-després a les vostres carpetes d'escriptori
📝 Corba d'Aprenentatge Zero: si podeu navegar, podeu utilitzar aquesta eina
FAQ
❓Com detecta canvis?
💬 Utilitza un enfocament de doble mètode: comparació píxel per píxel per diferències visuals i escaneig estructural per a la llista de canvis DOM/CSS.
❓Les meves dades són segures?
💬Sí. Tot es processa i emmagatzema 100% localment al vostre navegador.
❓Puc utilitzar-ho en localhost?
💬Absolutament! Funciona perfectament durant el desenvolupament local
❓Què passa amb el contingut dinàmic?
💬 L'eina està dissenyada per comparar estats estàtics. Per als millors resultats, preneu les vostres captures de pantalla quan les animacions hagin acabat i els anuncis siguin estables.
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.