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). Если есть какие-либо проблемы с установкой, обновите ваш браузер до последней версии и попробуйте снова.