CRX id
jfbbgijjljfbolelfkopkhbfjajjampm
jfbbgijjljfbolelfkopkhbfjajjampm
Description from extension meta
Измеряйте размеры, расстояния, отступы и поля любого элемента на любой веб-странице.
Image from store
Description from store
Screen Ruler — идеальный помощник для веб-разработчиков и дизайнеров, которые хотят проверить реализацию своих веб-сайтов. После активации Screen Ruler позволяет просматривать размеры, отступы, поля, названия тегов, идентификаторы и классы, просто наводя курсор на любой элемент. Вы также можете выбрать элемент, чтобы измерить расстояние до других элементов.
Использование
- Включите Screen Ruler, нажав на значок расширения, выбрав "Screen Ruler" в контекстном меню правой кнопки мыши или используя сочетание клавиш `Alt/Option + Shift + R`.
- Наведите курсор на элементы на веб-страницах, чтобы отобразить их размеры, отступы, поля, названия тегов, идентификаторы и классы.
- Выберите элемент, нажав на него прямо, это выделит его красным цветом. Чтобы снять выделение, нажмите еще раз, нажмите Escape или выберите другой элемент.
- Чтобы выбрать родительский элемент, используйте `Alt/Option + Up`, чтобы переместить выбор на родительский элемент. Используйте `Alt/Option + Down`, чтобы отменить выбор.
- Откройте боковую панель, чтобы просмотреть вычисленный CSS текущего выбранного элемента. Нажмите кнопку "Копировать CSS", чтобы скопировать вычисленный CSS текущего выбранного элемента в буфер обмена.
Функции
- Измеряйте размер любого элемента в пикселях.
- Измеряйте расстояние в пикселях между любыми двумя элементами.
- Названия HTML-тегов, имена классов и идентификаторы.
- Сочетания клавиш для выбора родительских/дочерних элементов.
- Адаптивные выделения изменяют размер вместе с окном браузера.
- Доступ из контекстного меню.
- Просмотр вычисленного CSS.
- Копирование CSS в буфер обмена.
- Работает на любой веб-странице.
- Настройка сочетаний клавиш через `chrome://extensions/shortcuts`.
Screen Ruler PRO
Screen Ruler также предлагает PRO-уровень, который разблокирует дополнительные функции.
1. Инспекция элементов: Просматривайте свойства элемента, когда наводите на него мышь. Включает информацию о положении элемента, размере, шрифте, цветах и многом другом.
2. Сетка макета: Наложите сетку макета на сайт, чтобы проверить выравнивание ваших дизайнов.
3. Сделайте скриншот текущей выделенной области, нажав на кнопку скриншота или используя сочетание клавиш `Ctrl/Command + Shift + S`. Идеально для документации или прикрепления к тикетам на Github.
4. Просмотр расширенных свойств в боковой панели браузера, включая модель блока элемента, цвета выбора, ресурсы и многое другое.
Screen Ruler PRO требует одноразовой оплаты для пожизненного доступа. Чтобы перейти на PRO, нажмите "Upgrade to PRO" в контекстном меню или щелкните правой кнопкой мыши значок расширения для просмотра вариантов обновления.
Screen Ruler предназначен для
- Разработчиков: Обнаружение проблем с макетом или выявление проблем с выравниванием. Независимо от того, регулируете ли вы отступы и поля или просто проверяете правильность выравнивания, Screen Ruler становится незаменимым дополнением к вашему набору инструментов разработки.
- Дизайнеров: Убедитесь, что ваши дизайны реализованы с пиксельной точностью. Screen Ruler служит мостом между дизайном и разработкой, позволяя проверить, что каждый элемент выровнен именно так, как вы задумали.
Установка
- Screen Ruler разработан специально для стабильной работы в Google Chrome 116+.
- Screen Ruler можно установить в любом браузере на базе Chromium, однако для наилучшего опыта убедитесь, что ваш браузер поддерживает все необходимые API (например, боковую панель и Offscreen). Если возникнут проблемы с установкой, обновите браузер до последней версии и попробуйте снова.