Screen Ruler

Что такое Screen Ruler?

Screen Ruler — это расширение Chrome для проверки и измерения веб-страниц. Оно помогает дизайнерам и разработчикам проверять размеры элементов, отступы, селекторы, computed CSS, цвета, скриншоты, проблемы с контрастностью для доступности и SEO-метаданные прямо в браузере.

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

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

• Измерение размеров и отступов элементов: просмотр размеров в пикселях, margin, padding и расстояний между элементами.
• Проверка идентичности элемента: отображение названий тегов, ID и классов при наведении или выборе.
• Просмотр computed CSS и его копирование: проверка текущих computed styles выбранного элемента в боковой панели и копирование CSS в буфер обмена.
• Линейки и color picker: размещение горизонтальных и вертикальных направляющих для точного измерения и выбор цветов в любой точке страницы.
• Захват выбранного контента: создание обрезанных скриншотов выбранных элементов с помощью сочетания клавиш.
• Проверка сигналов качества страницы: обнаружение проблем с контрастностью по WCAG, распространённых SEO-проблем, meta tags и данных предпросмотра для Facebook, X и LinkedIn.

Как пользоваться Screen Ruler

После установки расширения включите его через значок на панели инструментов, контекстное меню или сочетание Alt/Option + Shift + R. Наводите курсор на элементы, чтобы посмотреть их размер и метаданные, или нажмите на элемент, чтобы выбрать его и сравнить с ближайшим содержимым.

В боковой панели можно просматривать computed CSS и копировать его, использовать сочетания для выбора родительских и дочерних элементов, работать с линейками и цветами, а также открывать инструменты для скриншотов, meta tags и анализа страницы. Расширение также поддерживает собственные сочетания клавиш через настройки расширений Chrome.

Сценарии использования

• Проверка отступов и выравнивания на лендинге или в макете интерфейса перед передачей работы в разработку.
• Определение точного CSS-класса, ID и computed styles элемента при отладке frontend.
• Выбор цвета из дизайн-референса или живой страницы для совпадения с визуальной системой.
• Создание обрезанного скриншота одного компонента для документации или баг-репортов.
• Проверка страницы на отсутствие SEO-метаданных, несколько H1 или проблемы с контрастностью перед публикацией.

FAQ

Работает ли Screen Ruler на любом сайте?
В описании указано, что он работает на любой веб-странице.

Как активируется расширение?
Его можно открыть через значок расширения, контекстное меню по правому клику или сочетание клавиш Alt/Option + Shift + R.

Могу ли я копировать CSS из элемента?
Да. Боковая панель включает просмотр computed CSS и кнопку “Copy CSS”.

Есть ли в нём более продвинутые инструменты помимо проверки?
Да. В описании также упоминаются скриншоты, выбор цвета, проверки доступности, SEO-анализ и проверка social preview. Некоторые дополнительные возможности входят в тариф PRO.

Альтернативы

• Инструменты разработчика браузера: полезны для прямой проверки и отладки, особенно если вы работаете во встроенных панелях Chrome, а не в расширении-оверлее.
• Другие расширения для проверки в браузере: похожие инструменты могут быть более узко сфокусированы на измерениях, линейках, проверке CSS или выборе цветов.
• Инструменты для design handoff и QA: лучше подходят, когда командам нужен более широкий визуальный workflow, а не проверка элементов прямо в браузере.
• Инструменты аудита доступности и SEO: они могут давать более подробный отчёт о проблемах, если основная цель — аудит, а не живая проверка страницы.