Pixel Ruler

Pixel Ruler измеряет пиксели на любой веб-странице: экранная линейка для размеров элементов и отступов.

Pixel Ruler кладёт линейку прямо на экран и позволяет измерить в браузере что угодно. Нажмите на иконку на панели, протяните мышь по макету и прочитайте точное расстояние в CSS-пикселях. Наведите курсор на элемент — увидите его ширину, высоту, внутренние отступы и зазоры до соседних блоков. Цифры совпадают с DevTools, потому что расширение читает те же CSS-пиксели, которыми браузер рисует страницу. Ничего не нужно открывать, не нужно выгружать скриншот и считать в уме. Просто экранная линейка поверх сайта, который у вас и так перед глазами. Один оверлей, между режимами переключаться не надо: 📏 Зажмите и протяните, чтобы измерить расстояние между любыми двумя точками страницы. 📏 Наведите курсор на элемент и посмотрите его размер, отступы и смещения относительно соседей. 📏 Поставьте вертикальные и горизонтальные направляющие и выравнивайте блоки по ним. Линейка для экрана всегда под рукой как ориентир, а одна клавиша копирует результат в буфер обмена вместе с CSS-селектором элемента под курсором. С чего начать, три шага: 1. Установите расширение и закрепите его на панели. 2. Откройте страницу, с которой работаете, и нажмите на иконку. 3. Тяните, наводите, измеряйте — по окончании дважды нажмите Esc. Фронтенд-разработчики сверяют по ней вёрстку с макетом. Дизайнерам она заменяет линейку по странице, когда файл с передачей макета уже устарел. QA-инженеры заводят баг с конкретным числом вместо «кнопка как будто съехала вниз». Любому, кому нужно быстро померить пиксели на живом сайте, хватит двух кликов. Что даёт эта линейка для веб-страниц: - расстояние между любыми двумя точками в пикселях - ширину и высоту любого элемента на странице - padding, margin и зазоры между соседями - смещения от элемента до окружающих блоков - шкалы вдоль верхнего и левого края окна - тег, классы и CSS-селектор измеренного элемента - многоразовые направляющие для проверки выравнивания Управление с клавиатуры, чтобы курсор не дрожал: → Shift фиксирует измерение по горизонтали или вертикали → Стрелки сдвигают текущую точку ровно на 1 px → Esc сбрасывает текущее измерение, второй Esc возвращает страницу → Одно сочетание копирует результат в буфер обмена Ставите один раз — и у вас та же пиксельная линейка, что у пользователей Windows, Linux и ChromeOS, и та же, что у пользователей Mac: инструмент живёт в браузере, а не в операционной системе. Не надо искать, где скачать линейку для экрана, нет ни установщика, ни прав администратора — расширение приезжает из Chrome Web Store в один клик. На старте это бесплатная экранная линейка, все функции открыты всем. Линейка, которая открывается в отдельном окне, начинает мерить не то, как только страница прокрутилась. Эта экранная линейка нарисована внутри вкладки и едет вместе с содержимым. Это экранная линейка онлайн: она работает на живой странице, на staging-сервере, на клиентском сайте, за логином. Настольная программа, которая меряет статичную картинку окна, так не умеет. Нужно проверить иллюстрацию или логотип? Пусть будет пиксельная линейка для изображений: наведите курсор на картинку и прочитайте её отрисованный размер — он часто не совпадает с размером в исходном файле. Вопросы и ответы В: Как измерить пиксели на экране, не открывая DevTools? О: Нажмите на иконку и протяните курсор. Оверлей лежит поверх страницы, поэтому вы измеряете то, что видите, включая состояния при наведении, которые пропадают, когда фокус забирает панель. В: Экранная линейка, линейка для экрана, пиксельная линейка, screen ruler, px ruler, pixel ruler — это всё про неё? О: Про неё. Инструмент один, меняется только поисковая фраза. В: Можно измерять в сантиметрах или дюймах? О: Нет. Это инструмент для измерения в пикселях, и он показывает только CSS-пиксели — ту самую единицу, которую вы пишете в стилях. В: Везде ли она работает? О: На обычных сайтах — да. Служебные страницы Chrome, встроенный просмотрщик PDF и внутренности cross-origin iframe закрыты для любых расширений, и для этого тоже. В: Какие данные собираются? О: Никакие. Ноль сетевых запросов, ни аккаунта, ни регистрации. При установке расширение не просит пугающих разрешений и трогает страницу только после нажатия на иконку. Старые способы медленнее и грубее: приложить пластиковую линейку к стеклу монитора или считать пиксели на скриншоте. Линейка для экрана компьютера должна жить внутри браузера, перерисовываться при изменении вёрстки и говорить на тех же единицах, что и код. Именно это делает оверлей поверх страницы — и поэтому пиксельная линейка для сайта выигрывает у линейки, которую рисуют поверх скриншота в графическом редакторе. Описание доступно на 52 языках, так что экранная линейка найдётся по поиску и на вашем. Установите, измерьте пиксели на следующей же открытой странице и держите линейку в одном клике весь оставшийся день.