Screen Ruler - Измеряйте и исследуйте веб

Веб-инспектор для дизайнеров и разработчиков. Измеряйте элементы, извлекайте CSS и цвета, делайте скриншоты и многое другое.

Screen Ruler — идеальный помощник для веб-разработчиков и дизайнеров, желающих проверить реализацию своих сайтов. После активации он позволяет просматривать размеры, отступы, внутренние отступы, имена тегов, ID и классы, просто наводя курсор на любой веб-контент. Также можно выбрать элемент, чтобы измерить расстояния до других. Использование - Включите расширение, нажав на иконку, выбрав из контекстного меню правой кнопки мыши или используя горячую клавишу `Alt/Option + Shift + R`. - Наводите курсор на элементы веб-страниц, чтобы увидеть их размеры, отступы, внутренние отступы, имена тегов, ID и классы. - Выберите элемент, кликнув по нему напрямую; выделение станет красным. Чтобы снять выделение, кликните снова, нажмите Escape или выберите другой элемент. - Чтобы выбрать родительский элемент, используйте `Alt/Option + Up`. Используйте `Alt/Option + Down`, чтобы отменить выбор. - Просматривайте вычисленный CSS текущего выбранного элемента в боковой панели. Нажмите кнопку «Скопировать CSS», чтобы скопировать вычисленный CSS в буфер обмена. Возможности - Измеряйте размер в пикселях любого элемента. - Измеряйте расстояние в пикселях между любыми двумя элементами. - Имена HTML-тегов, имена классов и ID. - Горячие клавиши для выбора родительского/дочернего элемента. - Адаптивные выделения изменяют размер вместе с окном браузера. - Доступ из контекстного меню. - Инспекция вычисленного CSS. - Копирование CSS в буфер обмена. - Линейки страницы для точных измерений (горизонтальные и вертикальные направляющие с перекрестием). - Пипетка для выбора и копирования цветов из любой точки страницы. - Снимки элементов: Делайте обрезанные снимки выбранных элементов с помощью `Ctrl/Cmd + Shift + S`. - Проблемы доступности: Автоматически обнаруживает и подсвечивает нарушения контраста по WCAG в вашем выделении с практическими рекомендациями. - Проблемы SEO: Обнаруживает распространенные SEO-проблемы, такие как отсутствующие заголовки, несколько H1, отсутствующий alt-текст и отсутствующие meta-теги. - Meta-теги: Инспектируйте meta-теги SEO, Open Graph и Twitter card, сгруппированные по категориям. - Социальный предпросмотр: Просматривайте, как ваша страница отображается при публикации в Facebook, X и LinkedIn, используя реальные метаданные страницы. - Работает на любой веб-странице. - Настраивайте сочетания клавиш, посетив `chrome://extensions/shortcuts`. Screen Ruler PRO Также доступен уровень PRO, открывающий дополнительные возможности. - Живой CSS-редактор: Редактируйте CSS любого элемента прямо в боковой панели с полной поддержкой @media-запросов и принудительной активацией псевдосостояний. Изменения применяются мгновенно, а вкладка Changes отслеживает каждое изменение по элементу, чтобы его можно было скопировать или отменить. Инструменты HTML-редактирования позволяют вырезать, копировать, вставлять, дублировать и удалять элементы. Режим редактирования текста позволяет переписывать содержимое страницы прямо на месте. - Плавающий инспектор: Просматривайте детальные свойства при наведении, включая позицию, размер, отрисованный шрифт, цвета и многое другое. Нажмите Пробел, чтобы закрепить инспекторы и сравнивать несколько элементов рядом. - Адаптивный режим: Тестируйте дизайны в разных вьюпортах устройств с интерактивным эмулятором устройств и настраиваемыми размерами. - Источник: Просматривайте исходные правила таблиц стилей, применяемые к элементу, сгруппированные по исходному файлу с обертками @media и явно отмеченными конфликтами каскада. - Генератор Tailwind CSS: Мгновенно преобразуйте вычисленные стили любого элемента в утилитарные классы Tailwind v4. - Визуализация Box Shadow: Интерактивная разбивка многослойных box-shadow с развернутым видом. - Анализ анимации: Визуализируйте кривые тайминга CSS-анимаций и копируйте свойства анимации. - Инспектор переходов: Визуализируйте CSS-переходы и кривые функций тайминга наряду с анимациями. - Визуализация градиентов: Инспектируйте и визуализируйте CSS-градиенты с детальной разбивкой остановок цвета и направления. - Извлечение ресурсов: Извлекайте и скачивайте изображения, SVG и векторные ресурсы. - Извлечение цветов: Извлекайте и копируйте цветовые палитры из выбранного контента со значениями hex, RGB и HSL. - Типографика: Анализируйте и извлекайте все типографические стили, используемые в вашем выделении. - Определение технологий: Определяйте фреймворки, библиотеки и инструменты, на которых работает любой сайт, с поддержкой более 180 технологий. - Сетка макета: Накладывайте настраиваемую сетку макета для идеального выравнивания дизайна. - Инспекция макета: Визуализируйте Flexbox и Grid макеты с четкой разбивкой выравнивания, направления и структуры. - Точки останова: Обнаруживайте и визуализируйте точки останова медиа-запросов CSS с цветными граничными линиями прямо на странице. - Поиск по CSS-селектору: Находите и подсвечивайте элементы с помощью CSS-селекторов. - Режим X-Ray: Покажите базовую структуру страницы, обведя весь контент. - Инспекция Canvas: Инспектируйте HTML5 Canvas элементы. Просматривайте размеры, типы контекста и извлекайте цветовые палитры. - Вес страницы: Точно видите, что загружается на любой странице, с разбивкой по скриптам, таблицам стилей, изображениям, шрифтам и многому другому. PRO требует разовой оплаты за пожизненный доступ. Сделано для - Разработчиков: Замечайте проблемы с макетом или находите проблемы с выравниванием. Будь то тонкая настройка отступов и внутренних отступов или просто проверка того, что все правильно выровнено, этот инструмент станет незаменимым дополнением вашего набора разработчика. - Дизайнеров: Убедитесь, что ваши дизайны реализованы с пиксельной точностью. Он действует как мост между дизайном и разработкой, позволяя проверить, выровнен ли каждый компонент именно так, как задумано. Установка - Специально разработано для стабильной работы в Google Chrome 116+. - Устанавливается на любой Chromium-браузер; однако для лучшего опыта убедитесь, что ваш браузер поддерживает все необходимые API (такие как Side Panel и Offscreen). Если возникнут проблемы с установкой, обновите браузер до последней версии и попробуйте снова.