PerfectPixel by WellDoneCode (pixel perfect)

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

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