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. Продвинутая Боковая Панель: Полный анализ элементов включая вычисленные стили, блочную модель, цвета, ресурсы и анимации. Screen Ruler PRO требует единовременной оплаты для пожизненного доступа. Screen Ruler создан для - Разработчиков: Обнаружение проблем с макетом или выявление проблем с выравниванием. Независимо от того, настраиваете ли вы отступы и внутренние отступы, или просто убеждаетесь, что все правильно выровнено, Screen Ruler становится незаменимым дополнением к вашему набору инструментов разработки. - Дизайнеров: Убедитесь, что ваши дизайны были реализованы с точностью до пикселя. Screen Ruler действует как мост между дизайном и разработкой, позволяя вам проверить, что каждый элемент выровнен именно так, как вы задумывали. Установка - Screen Ruler разработан специально для стабильности в Google Chrome 116+. - Screen Ruler устанавливается на любой браузер Chromium, однако для лучшего опыта убедитесь, что ваш браузер поддерживает все необходимые API (такие как Side Panel и Offscreen). Если возникают проблемы с установкой, обновите браузер до последней версии и попробуйте снова.