CRX id
begcddgpiamjkanbgdcihlbfdmogcloo
begcddgpiamjkanbgdcihlbfdmogcloo
Description from extension meta
Сравнивайте визуальные изменения до и после обновления веб-страниц с подробными отчетами и анализом DOM.
Image from store
Description from store
Устали вручную проверять визуальные ошибки после каждого изменения кода?
UI Testing Inspector — надежный инструмент для точного визуального сравнения с анализом DOM.
Почему стоит использовать UI Testing Inspector?
⚡ 100% локально и приватно
Все скриншоты и данные сравнения остаются на вашем компьютере.
Никаких облаков, никакой передачи данных.
⚡ Мгновенная обратная связь
Установите расширение, сделайте базовый снимок, внесите изменения — и сразу увидите отличия. Идеально для быстрой регрессии.
⚡ Pixel-perfect проверка
Обнаруживайте даже минимальные визуальные изменения, которые легко упустить при ручной проверке.
Ключевые функции
🔸 Снимок "до" в один клик. Сохраняйте базовое состояние страницы одним нажатием.
🔸 Пиксельное сравнение. Получайте наглядный отчет: "до", "после" и выделение различий.
🔸 Инспекция элементов. Выход за рамки DevTools: видны изменения в DOM и CSS на уровне кода.
🔸 Захват viewport и всей страницы. Выбирайте, что сохранять: только видимую область или всю прокручиваемую страницу.
🔸 История отчетов. Автоматически сохраняется до 15 последних сравнений.
🔸 Светлая и тёмная тема. Комфортная работа в любое время суток.
Что входит в отчет
🔍 После сравнения вы получаете подробный отчет, включающий:
✔ Процент различий и количество добавленных, удалённых и изменённых элементов.
✔ Скриншоты "до" и "после", а также изображение с подсветкой различий.
✔ Точный список всех изменений: от цвета и шрифта до отступов и структуры.
✔ Глубокий анализ: изменения макета, контента и структуры страницы.
Что можно выявить
➤ Сдвиги и нарушения макета
➤ Изменения цвета, фона, стилей
➤ Пропавшие или перемещённые элементы
➤ Различия в тексте и шрифтах
➤ Визуальные расхождения в изображениях
Как это работает
1️⃣ Создайте базовый снимок
Откройте нужную страницу и нажмите «Установить базовый снимок» — это ваша точка отсчета.
2️⃣ Вносите изменения в код
Редактируйте CSS, HTML или компоненты без страха потерять визуальный контроль.
3️⃣ Сравните с базой
Нажмите «Сравнить с базовым снимком» — и получите отчет в новой вкладке.
4️⃣ Проанализируйте различия
Используйте визуальное сравнение и список изменений, чтобы найти каждую деталь.
5️⃣ Обновите снимок
Убедились, что всё работает? Обновите базу новым состоянием страницы.
Советы профессионалов
✨ Захватывайте снимки только после полной загрузки страницы
✨ Используйте захват всей страницы для полноты теста
✨ Держите одинаковый размер окна браузера при сравнении
✨ Делайте снимки, когда контент стабилен
✨ Тестируйте одно изменение за раз — проще отслеживать результат
✨ Сохраняйте важные снимки перед крупными изменениями
✨ Сравнивайте страницы в одинаковом состоянии (авторизация, данные и т.д.)
Сценарии использования
✅ Визуальное регрессионное тестирование
Выявляйте неожиданные визуальные баги после изменений в коде.
✅ Проверка UI и дизайна
Сравнивайте реализацию с макетами — до последнего пикселя.
✅ CSS-рефакторинг
Безопасно меняйте стили: сравнение сразу покажет побочные эффекты.
✅ Frontend-тестирование
Идеален для рабочих процессов разработки с быстрым визуальным фидбеком.
Для кого создан этот инструмент
➡ Frontend-разработчики — находите баги до коммита
➡ QA-инженеры — усиливайте ручное тестирование визуальной проверкой
➡ UI/UX-дизайнеры — проверяйте соответствие макетам
➡ Фрилансеры и небольшие команды — мощный инструмент без затрат на корпоративные решения
FAQ
❓ Как обнаруживаются изменения?
💬 Используется два подхода: сравнение по пикселям и структурный анализ DOM/CSS.
❓ Насколько безопасны мои данные?
💬 Все данные хранятся и обрабатываются локально — 100% приватность.
❓ Можно ли использовать на localhost?
💬 Да, отлично работает в среде локальной разработки.
❓ А что с динамическим контентом?
💬 Лучше всего сравнивать статические состояния. Захватывайте скриншоты после завершения анимаций и загрузки рекламы.
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.