Screen Ruler - Measure The Web

Screen Ruler - это идеальный помощник для веб-разработчиков и дизайнеров, желающих проверить реализацию своих веб-сайтов. После активации Screen Ruler позволяет просматривать размеры, отступы, внутренние отступы, имена тегов, ID и классы, просто наведя курсор на любой элемент. Вы также можете выбрать элемент для измерения расстояний до других элементов.

Использование
- Переключите Screen Ruler, нажав на значок расширения, выбрав "Screen Ruler" из контекстного меню правой кнопки мыши или используя сочетание клавиш Alt/Option + Shift + R.
- Наведите курсор на элементы веб-страниц для отображения их размеров, отступов, внутренних отступов, имен тегов, ID и классов.
- Выберите элемент, нажав на него напрямую, это сделает подсветку красной. Для отмены выбора нажмите снова, нажмите Escape или выберите другой элемент.
- Для выбора родительского элемента используйте Alt/Option + Вверх, перемещая ваш выбор к родительскому элементу, используйте Alt/Option + Вниз для обращения вашего выбора.
- Просмотрите вычисленный CSS текущего выбранного элемента в боковой панели. Нажмите кнопку "Copy CSS" для копирования вычисленного CSS текущего выбранного элемента в буфер обмена.

Функции
- Измерение размера в пикселях любого элемента.
- Измерение расстояния в пикселях между любыми двумя элементами.
- Имена HTML тегов, имена классов и ID.
- Сочетания клавиш для выбора родитель/дочерний элемент.
- Адаптивные выборы изменяются вместе с окном браузера.
- Доступ из контекстного меню.
- Проверка вычисленного CSS.
- Копирование CSS в буфер обмена.
- Работает на любой веб-странице.
- Настройте сочетания клавиш, посетив chrome://extensions/shortcuts.

Screen Ruler PRO
Screen Ruler также предлагает уровень PRO, который разблокирует дополнительные функции.
1. Плавающий Инспектор: Просматривайте подробные свойства элементов при наведении, включая позицию, размер, отрендеренный шрифт, цвета и многое другое.
2. Визуализация Теней Блока: Интерактивная разбивка многослойных теней блоков с развернутым видом, показывающим каждый компонент тени.
3. Анализ Анимации: Визуализируйте кривые времени CSS анимации и копируйте CSS свойства анимации.
4. Извлечение Ресурсов: Извлекайте и загружайте изображения, SVG и векторные ресурсы напрямую с любой веб-страницы.
5. Извлечение Цветов: Извлекайте и копируйте цветовые палитры из выбранных элементов со значениями hex, RGB и HSL.
6. Наложение Сетки Макета: Наложите настраиваемую сетку макета для идеального выравнивания дизайна.
7. Скриншоты Элементов: Захватывайте обрезанные скриншоты выбранных элементов используя Ctrl/Cmd + Shift + S.
8. Поиск по CSS Селектору: Находите и выделяйте элементы используя CSS селекторы.
9. Типографика: Анализируйте и извлекайте все типографские стили, используемые в вашем выборе.
10. Рентген-режим: Раскройте основную структуру страницы, обводя все элементы.

Screen Ruler PRO требует единовременной оплаты для пожизненного доступа.

Screen Ruler создан для
- Разработчиков: Обнаружение проблем с макетом или выявление проблем с выравниванием. Независимо от того, настраиваете ли вы отступы и внутренние отступы, или просто убеждаетесь, что все правильно выровнено, Screen Ruler становится незаменимым дополнением к вашему набору инструментов разработки.
- Дизайнеров: Убедитесь, что ваши дизайны были реализованы с точностью до пикселя. Screen Ruler действует как мост между дизайном и разработкой, позволяя вам проверить, что каждый элемент выровнен именно так, как вы задумывали.

Установка
- Screen Ruler разработан специально для стабильности в Google Chrome 116+.
- Screen Ruler устанавливается на любой браузер Chromium, однако для лучшего опыта убедитесь, что ваш браузер поддерживает все необходимые API (такие как Side Panel и Offscreen). Если возникают проблемы с установкой, обновите браузер до последней версии и попробуйте снова.