CRX id
begcddgpiamjkanbgdcihlbfdmogcloo
begcddgpiamjkanbgdcihlbfdmogcloo
Description from extension meta
Comparez les changements visuels avant et après la mise à jour des pages web avec des rapports détaillés et une analyse DOM.
Image from store
Description from store
Fatigué de vérifier manuellement les bugs visuels après chaque modification de code ? UI Testing Inspector est votre vérificateur de différences visuelles fiable avec analyse du DOM.
Pourquoi l'utiliser ?
⚡️ 100% Local & Privé : toutes les captures d'écran et les données de comparaison restent sur votre ordinateur. Pas de services cloud, pas de partage de données
⚡️ Boucle de Retour Instantanée : installez l'extension, prenez une référence, apportez vos modifications de code et voyez les différences instantanément. Parfait pour des tests de régression rapides
⚡️ Détection Pixel-Parfait : détectez même les plus petits changements visuels que l'œil humain pourrait manquer
Fonctionnalités Clés :
🔸 Référence en Un Clic : capturez l'état "avant" de n'importe quelle page web en un seul clic
🔸 Diff Visuel Pixel-Parfait : obtenez un rapport clair montrant la référence, l'état actuel et une image mettant en évidence les différences exactes
🔸 Inspecter l'Élément : allez au-delà de l'inspecteur de base. Voyez non seulement le code, mais aussi ce qui a changé dans le DOM et le CSS
🔸 Capture de Page Complète & de Vue : choisissez entre capturer la zone visible ou l'ensemble de la page défilable
🔸 Historique des Rapports : enregistrez et consultez jusqu'à 15 rapports de comparaison précédents
🔸 Thèmes Clair & Sombre : pour une visualisation confortable, de jour comme de nuit
Dans le Rapport Détaillé
🔍 Après chaque comparaison, vous obtenez un rapport complet qui vous donne une vue d'ensemble :
✔️ Résumé : le pourcentage de différences visuelles et un compte des éléments ajoutés, supprimés et modifiés
✔️ Vue Côté à Côté : comparez les captures d'écran "Avant" et "Après" juste à côté de l'image "Différences" mise en évidence
✔️ Liste des Changements DOM & CSS : identifiez les éléments exacts qui ont changé. Plus de suppositions sur pourquoi un pixel a bougé - voyez les changements au niveau du code comme la couleur, la taille de police ou la marge
✔️ Détails Techniques : analyse complète des changements de mise en page, modifications de contenu et mises à jour structurelles
Ce que Vous Allez Détecter :
➤ Déplacements de mise en page et désalignements
➤ Changements de couleur et de style
➤ Éléments manquants ou déplacés
➤ Modifications de police et de texte
➤ Différences d'images
Comment Ça Fonctionne :
1️⃣ Définir une Référence Visuelle : naviguez vers la page que vous souhaitez tester et cliquez sur "Définir la Référence" dans la fenêtre contextuelle de l'extension. C'est votre source de vérité.
2️⃣ Codez en Confiance : apportez des modifications à votre CSS, mettez à jour le contenu ou refactorisez des composants.
3️⃣ Vérifiez Instantanément les Changements : cliquez sur "Comparer avec la Référence". Un nouvel onglet s'ouvrira avec un rapport visuel détaillé.
4️⃣ Analysez les Différences : utilisez la vue côte à côte et la liste des changements détectés pour repérer chaque problème.
5️⃣ Mettez à Jour la Référence : satisfait de la nouvelle version ? Cliquez simplement à nouveau sur "Définir la Référence" pour enregistrer le nouveau look comme votre référence.
Conseils Pro
✨ Attendez que les pages se chargent complètement avant de capturer les références
✨ Utilisez la capture de page complète pour des tests complets
✨ Prenez des captures d'écran dans la même taille de fenêtre de navigateur pour des comparaisons précises
✨ Capturez les références lorsque le contenu est stable
✨ Testez un changement à la fois pour des résultats de diff plus clairs
✨ Enregistrez des références importantes avant des refactorisations majeures de code
✨ Comparez des états de page similaires (même statut de connexion utilisateur, données chargées)
Cas d'Utilisation
✅ Tests de Régression Visuelle : le cas d'utilisation principal. Après avoir apporté des modifications, effectuez une comparaison pour détecter tout bug visuel non intentionnel.
✅ Vérification UI/Design : assurez-vous d'une mise en œuvre pixel-parfaite et d'une cohérence de marque par rapport aux maquettes de design.
✅ Refactorisation CSS : refactorisez sans crainte le CSS hérité. Un test de diff visuel rapide vous dira immédiatement si vos modifications ont eu des effets secondaires inattendus.
✅ Tests Frontend : un outil essentiel pour tout flux de travail de test frontend, fournissant un retour visuel immédiat.
Pour Qui Est-il Conçu ?
➡️ Développeurs Frontend : détectez les problèmes de mise en page avant de valider votre code
➡️ Ingénieurs QA : améliorez vos tests manuels d'UI avec une étape de vérification visuelle fiable
➡️ Designers UI/UX : assurez-vous rapidement que la mise en œuvre en direct correspond à vos designs
➡️ Freelancers & Petites Équipes : un outil de test visuel sans le prix d'entreprise
Pourquoi Il Se Démarque
🖼️ Mieux Que des Captures d'Écran Manuelles : arrêtez de jongler avec des images avant et après dans vos dossiers de bureau
📝 Aucune Courbe d'Apprentissage : si vous pouvez naviguer, vous pouvez utiliser cet outil
FAQ
❓Comment détecte-t-il les changements ?
💬 Il utilise une approche à double méthode : une comparaison pixel par pixel pour le diff visuel et un scan structurel pour la liste des changements DOM/CSS.
❓Mes données sont-elles sécurisées ?
💬 Oui. Tout est traité et stocké 100% localement dans votre navigateur.
❓ Puis-je l'utiliser sur localhost ?
💬 Absolument ! Il fonctionne parfaitement pendant le développement local
❓ Qu'en est-il du contenu dynamique ?
💬 L'outil est conçu pour comparer des états statiques. Pour de meilleurs résultats, capturez vos captures d'écran lorsque les animations sont terminées et que les publicités sont stables.
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.