Page Measure Toolkit av Mark

🎯 Page Measure Toolkit v2.0 — All-in-One Инструмент для Дизайнеров

Зачем переключаться между 5 расширениями?
Page Measure Toolkit объединяет функционал профессиональных инструментов инспекции в одном мощном интерфейсе.



🚀 Что Нового в v2.0.0

Мажорное обновление архитектуры

• Улучшенная производительность — оптимизация через requestAnimationFrame для плавной работы
• Модульная архитектура — чистое разделение компонентов для стабильности
• Улучшенная безопасность — защита от XSS и валидация данных

✨ Основные Возможности

📏 Точные Измерения

• Hover-подсветка элементов с отображением размеров в реальном времени
• Интерактивное измерение расстояний между любыми точками (клик-за-кликом)
• Адаптивное позиционирование меток — видно даже у краёв экрана
• Несколько одновременных измерений на одном экране
• Визуализация margin и padding прямо на элементе

📦 Box Model Inspector

Вдохновлено Chrome DevTools, но лучше:
- Визуальная диаграмма margin → border → padding → content
- Крупный, легко читаемый шрифт (16-26px)
- ~40 вычисленных CSS-свойств в удобном формате
- Интерактивные элементы — клик для копирования значений
- Прокручиваемый список с моноширинным форматированием

🎯 Layout Inspector

Профессиональная визуализация макетов:
- Автоматическое определение Flexbox с отображением свойств контейнера
- Визуализация CSS Grid с линиями сетки и номерами треков
- Цветные направляющие (синие для flex, фиолетовые для grid)
- Показ ключевых свойств (flex-direction, justify-content, grid-template-columns)
- Размеры треков Grid в пикселях и fractional units (fr)

🎨 Анализ Цветов

Полный контроль над палитрой:
- Извлечение всех цветов из computed styles элемента
- Поддержка CSS переменных с автоматическим разрешением значений
- Анализ градиентов (linear, radial, conic, repeating)
- Копирование в HEX/RGB одним кликом
- Визуальные образцы с checkerboard фоном для прозрачности
- Toast-уведомления при копировании

🔤 Типографический Анализ

Детальная инспекция шрифтов:
- Определение фактически используемого шрифта (не только font-family)
- Интерактивный предпросмотр с реальным текстом элемента
- Поиск шрифтов на Google Fonts, Adobe Fonts, MyFonts
- Анализ читаемости текста
- Полные метрики (размер, высота строки, межбуквенные интервалы)

📤 Экспорт Данных

Профессиональный экспорт информации:
- Markdown формат с эмодзи и структурой
- Полная информация об элементе:
- Размеры (ширина × высота)
- Box Model (margin, padding, border)
- Цветовая схема
- Позиция на странице
- Готовый CSS-код
- Автоматическое копирование в буфер обмена
- Горячая клавиша Ctrl+Shift+C

🎛️ Панель Инструментов

Удобное управление:
- Перетаскивание панели по нижнему краю окна
- Горячие клавиши для быстрого доступа:
- L — Layout Inspector
- B — Box Model
- C — Copy Info
- I — Inspector Mode
- Esc — Collapse/Deactivate
- Клавиатурная навигация с поддержкой Tab и стрелок
- Визуальная обратная связь при использовании горячих клавиш



🔥 Уникальные Фишки

Умное Поведение

• Заморозка hover — удерживайте Shift для точного позиционирования
• Автоматическое позиционирование меток — всегда видны на экране
• Фильтрация элементов расширения — не мешают инспекции
• Минимальный порог измерения (8px) для чистоты интерфейса

Производительность

• Оптимизация через RAF для плавной анимации
• Throttling событий — никаких тормозов даже на сложных страницах
• Кэширование DOM — мгновенный доступ к элементам
• Минимальные перерисовки при изменении состояния

Безопасность

• Защита от XSS через DOMParser
• Безопасное копирование через Clipboard API с fallback
• Валидация входных данных во всех модулях

🌍 Локализация

• Английский — полная поддержка
• Русский — полная поддержка

💡 Для Кого Этот Инструмент?

Web-дизайнеры

Точные измерения и визуальный анализ макетов для пиксель-перфект дизайна

UI/UX дизайнеры

Быстрая инспекция интерфейсов, анализ отступов и типографики

Frontend-разработчики

Отладка CSS, анализ Box Model, визуализация Flexbox/Grid

QA-инженеры

Верификация вёрстки, проверка соответствия дизайн-макетам

🚀 Начало Работы

1. Установите расширение из Firefox Add-ons
2. Откройте любую веб-страницу
3. Нажмите на иконку расширения или Alt+R
4. Наводите курсор для подсветки элементов
5. Кликайте для детального анализа

Page Measure Toolkit v2.0 — профессиональный инструмент для тех, кто ценит своё время и требует точности в работе.

💝 Поддержка Разработчика
Расширение навсегда останется бесплатным.
Если Page Measure Toolkit помогает вам в работе, вы можете поддержать разработку:
Bitcoin (BTC):
bc1qgaelul4t5w6jfvfum9cru66x0py8g3mqcpzxqh
Или просто:

⭐ Оставьте отзыв в Firefox Add-ons
🐛 Сообщите о багах
💡 Предложите новые идеи
📢 Расскажите коллегам о расширении

Каждый вклад помогает делать инструмент лучше!

Made with ❤️ by Mark