Screen Ruler: Измерение веб-страниц

Измеряйте размеры, расстояния, отступы и поля любого элемента на любой веб-странице.

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