PerfectPixel by WellDoneCode (pixel perfect)

Наложите дизайн-макет на страницу — попиксельное сравнение верстки прямо в браузере.

PerfectPixel добавляет полупрозрачный слой с макетом поверх любой веб-страницы, позволяя сравнить верстку с оригинальным дизайном прямо в браузере. Загрузите макет, настройте прозрачность — и с попиксельной точностью увидите, где код расходится с макетом. Больше не нужно переключаться между вкладками или сверять два экрана на глаз. Как это работает: установите расширение, откройте любую страницу и добавьте изображение — перетащите файл, вставьте из URL, вставьте из буфера обмена или выберите через файловый менеджер. Расположите и масштабируйте оверлей, затем регулируйте прозрачность для сравнения. Возможности: - Загрузка из PNG, JPG или SVG поверх любой веб-страницы - Регулируемая прозрачность для визуального сравнения в реальном времени - 5 режимов наложения — Нормальный, Разница, Инверсия, Умножение, Наложение — каждый полезен для выявления разных типов расхождений - Блокировка слоя: слой становится прозрачным для кликов и взаимодействия с элементами страницы - Слои сохраняются для каждого домена и автоматически восстанавливаются между сессиями - Несколько слоёв на один домен - Масштабирование, позиционирование, центрирование - Горячие клавиши для основных действий Новое в версии 3.0: - 5 режимов наложения для продвинутого сравнения (режим Разница мгновенно подсвечивает расхождения между макетом и версткой) - Обновлённый современный интерфейс — функции стало проще найти - Тарифы Teams и Enterprise для агентств и команд разработки Pro-функции: - Тёмная тема - Неограниченное количество одновременных слоёв (в бесплатной версии — 2) - Поворот слоёв - Кастомная иконка, цвет акцента, свой CSS Создан для фронтенд-разработчиков, QA-инженеров, агентств и команд разработки, которым важно, чтобы результат в браузере точно соответствовал дизайн-макету. 350 000+ разработчиков. Более 10 лет в Chrome Web Store.