Page Ruler добавляет на любую веб-страницу линейки и перетаскиваемые направляющие в стиле Photoshop. Пиксельно точные линейки проходят вдоль верхнего и левого краёв области просмотра. Вы можете перетаскивать направляющие на страницу, чтобы измерять расстояния, проверять выравнивание и верифицировать отступы — прямо на живой странице.
Дизайнеры, работающие в Figma или Photoshop, полагаются на линейки и направляющие для проверки отступов и выравнивания. Но когда эти дизайны реализуются в HTML/CSS, верификация пиксельной точности обычно означает открытие DevTools, наведение на элементы по одному и сравнение вычисленных значений с макетом. Page Ruler переносит привычный рабочий процесс с линейками и направляющими прямо в браузер. Горизонтальная линейка с делениями охватывает верхнюю часть области просмотра, а вертикальная — левый край: обе показывают позиции в пикселях. Нажмите и перетащите от любой линейки, чтобы разместить направляющую на странице. Направляющие имеют цветовую кодировку (синие — горизонтальные, красные — вертикальные) и отображают свою позицию в пикселях. Расстояние между любыми двумя параллельными направляющими вычисляется и отображается автоматически. Перетаскивайте направляющие для перепозиционирования или дважды нажимайте, чтобы удалить. Весь overlay ненавязчив — он располагается поверх страницы, не влияя на макет и взаимодействия.
Точные линейки с делениями через каждые 50 пикселей проходят вдоль верхнего и левого краёв области просмотра. Линейки прокручиваются вместе со страницей и показывают точные пиксельные позиции относительно начала координат страницы (0,0). Деления через 10px с подписями через каждые 50px.
Нажмите и перетащите от горизонтальной линейки, чтобы создать горизонтальную направляющую, или от вертикальной линейки — для вертикальной направляющей. Направляющие привязываются к позиции курсора и показывают точную пиксельную координату (например, y: 200px). Перетаскивайте для перепозиционирования, дважды нажимайте для удаления.
Когда размещены две параллельные направляющие, расстояние в пикселях между ними автоматически вычисляется и отображается со скобкой и подписью. Разместите две горизонтальные направляющие на расстоянии 120px и увидите подпись «120px» между ними.
Горизонтальные направляющие синие, вертикальные — красные: это позволяет легко различать их с первого взгляда при размещении нескольких направляющих. Каждая направляющая показывает свою позицию в маленьком значке-подписи.
Линейки и направляющие отображаются как прозрачный overlay, который не влияет на DOM страницы, её макет или JavaScript. Вы по-прежнему можете нажимать для взаимодействия с элементами страницы. Overlay перехватывает нажатия только на линейках и рукоятках направляющих.
Размещайте столько направляющих, сколько нужно — без ограничений. Создавайте полноценную сетку измерений с горизонтальными и вертикальными направляющими, отмечающими каждую важную точку выравнивания на странице.
В макете указано, что шапка высотой 80px, а контент начинается в 120px от верха. Разместите горизонтальные направляющие в этих позициях и мгновенно проверьте, соответствует ли реализованная страница спецификациям дизайна.
Разместите направляющие у верхнего и нижнего края повторяющихся элементов (карточек, пунктов списка, секций), чтобы убедиться в одинаковых отступах. Непоследовательные промежутки между элементами становятся сразу очевидны.
Разместите вертикальную направляющую у левого края заголовка, затем проверьте, выравниваются ли по той же линии текст абзаца, кнопки и изображения ниже. Погрешности выравнивания даже в несколько пикселей видны на фоне направляющей.
Разместите две вертикальные направляющие у левого и правого краёв элемента, чтобы измерить его ширину. Разместите две горизонтальные направляющие для измерения высоты. Автоматически вычисленное расстояние даёт точные пиксельные размеры.
Разместите вертикальную направляющую на распространённых ширинах точек переключения (768px, 1024px, 1280px) и измените размер браузера, чтобы проверить, корректно ли элементы перестраиваются при каждой точке. Направляющие остаются фиксированными в качестве визуальных ориентиров.
Откройте плавающую панель DevSuite Pro и нажмите иконку Page Ruler. Пиксельно точные линейки появятся вдоль верхнего и левого краёв области просмотра.
Нажмите и перетащите от верхней линейки, чтобы разместить горизонтальную направляющую, или от левой линейки — для вертикальной. Направляющая следует за курсором и привязывается к пиксельной позиции при отпускании.
Каждая направляющая показывает свою пиксельную позицию (например, y: 200px). Когда размещены две параллельные направляющие, расстояние между ними автоматически отображается со скобкой и подписью.
Перетащите любую направляющую на новую позицию — подписи с расстояниями обновятся в реальном времени. Дважды нажмите на направляющую, чтобы удалить её со страницы.
Снова нажмите иконку Page Ruler, чтобы скрыть все линейки и направляющие. Позиции направляющих сохраняются при повторной активации в рамках той же сессии.
Установите DevSuite Pro бесплатно и разблокируйте более 39 инструментов разработчика для вашего браузера.
