Screen Ruler - Measure The Web

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

Использование

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

Возможности

- Измеряйте размер любого элемента в пикселях.
- Измеряйте расстояние в пикселях между любыми двумя элементами.
- Имена тегов HTML, имена классов и ID.
- Горячие клавиши для выбора родителя/потомка.
- Адаптивные выделения изменяют размер вместе с окном вашего браузера.
- Доступ из контекстного меню.
- Инспектор вычисленного CSS.
- Копирование CSS в буфер обмена.
- Линейки страницы для точных измерений (горизонтальные и вертикальные направляющие с перекрестием).
- Инструмент "Пипетка" для взятия образцов и копирования цветов из любого места на странице.
- Скриншоты элементов: Делайте обрезанные скриншоты выбранных элементов, используя `Ctrl/Cmd + Shift + S`.
- Работает на любой веб-странице.
- Настройте сочетания клавиш, посетив `chrome://extensions/shortcuts`.

Screen Ruler PRO
Также доступен уровень PRO, который открывает дополнительные функции.

- Плавающий инспектор: Просматривайте подробные свойства элемента при наведении, включая положение, размер, отображаемый шрифт, цвета и многое другое.
- Проблемы доступности: Автоматически обнаруживайте и выделяйте сбои контрастности WCAG в вашем выборе с практическими рекомендациями.
- Адаптивный режим: Тестируйте свои дизайны в различных окнах просмотра устройств с помощью интерактивного эмулятора устройств и пользовательских размеров.
- Визуализация теней: Интерактивный разбор многослойных теней с разделенным видом.
- Анализ анимации: Визуализируйте кривые времени анимации CSS и копируйте свойства анимации.
- Извлечение ассетов: Извлекайте и загружайте изображения, SVG и векторные ассеты.
- Извлечение цветов: Извлекайте и копируйте цветовые палитры из выбранного контента со значениями hex, RGB и HSL.
- Наложение сетки макета: Накладывайте настраиваемую сетку макета для идеального выравнивания дизайна.
- Поиск по CSS-селектору: Находите и выделяйте элементы с помощью CSS-селекторов.
- Типографика: Анализируйте и извлекайте все стили типографики, используемые в вашем выборе.
- Режим X-Ray: Раскройте базовую структуру страницы, обрисовав весь контент.

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

Сделано для

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

Установка

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