CRX id
pmkbdhlmjbnmmpeecekhplejmlmeapog
pmkbdhlmjbnmmpeecekhplejmlmeapog
Description from extension meta
Измеряйте пиксельные расстояния и сетки на любой веб-странице.
Image from store
Description from store
Точность пикселей — тихий герой отличного дизайна. Несоответствие всего лишь одному пикселю может нарушить ритм сетки, сделать текст нецентральным или заставить весь компонент выглядеть «почти правильно», но не совсем. Grid Ruler Lite предоставляет разработчикам интерфейса, дизайнерам UI/UX, тестировщикам QA и всем, кто заботится о визуальном совершенстве, мгновенный набор инструментов для измерения в браузере — без тяжеловесного программного обеспечения для дизайна, без загроможденных панелей DevTools и без скриншотов, перетасованных во внешние приложения. Одним щелчком мыши расширение накладывает изменяемую линейку, направляющие привязки к сетке и дополнительные сетки базовых линий поверх любой веб-страницы, чтобы вы могли проверять интервалы, проверять сетки по 8 точек и фиксировать доказательства ошибок макета за считанные секунды.
Что выделяет Grid Ruler Lite?
Активация одним щелчком, отмена одним щелчком
Щелкните значок на панели инструментов (или вызовите сочетание клавиш, заданное в настройках клавиатуры браузера), и расширение внедрит облегченный<canvas> Наложение, инкапсулированное в свой собственный Shadow-DOM. CSS вашей страницы не может вмешиваться, и наложение никогда не изменяет дерево DOM, которое вы тестируете. Щелкните еще раз, и все направляющие, сетки и метки исчезнут — без перезагрузки страницы, без задержек прослушивателей событий.
Почему вам это нужно в вашем наборе инструментов
Экономьте время: измерение отступов в DevTools требует углубления во вложенные поля и мысленного добавления значений границ и полей. Grid Ruler Lite визуально показывает расстояния за одно перетаскивание.
Уменьшение количества ошибок: выявляйте незначительные регрессии интервалов до того, как они достигнут стадии подготовки или, что еще хуже, производства, особенно в контрольных точках реагирования, на которые не всегда обращает внимание отдел контроля качества.
Улучшение совместной работы: дизайнеры могут накладывать 8-точечную сетку непосредственно на развернутую сборку и делиться снимками экрана, предоставляя разработчикам точную пиксельную обратную связь без комментариев Figma.
Оставайтесь сосредоточенными: никаких alt-tab в Photoshop или открытия файлов Sketch только для того, чтобы измерить кнопку. Все происходит на живой странице, точно так, как это видят конечные пользователи.
Обучение и документирование: менеджеры по продуктам и технические писатели могут демонстрировать поведение макета с помощью снимков экрана линейки, делая документы спецификаций более понятными для всех заинтересованных сторон.
Целевые группы пользователей
Группа пользователей
Разработчики интерфейсов
Необходимо проверить интервалы CSS, зазоры Flexbox и выравнивание компонентов по контрольным точкам. Перетаскивание линеек, привязка к краям, блокировка направляющих, экспорт снимков экрана для обзоров PR.
UI/UX-дизайнеры
Необходимо подтвердить, что сборки разработчика соответствуют 8-точечным или 10-точечным системам проектирования. Наложение базовых сеток, измерение отступов, обмен аннотированными PNG-файлами.
Тестировщики QA
Сообщайте о точных ошибках с явными доказательствами
Быстрые измерения и создание снимков экрана одним нажатием кнопки сразу же попадают в систему отслеживания ошибок
Редакторы контента и менеджеры проектов
Проверьте перенос заголовков, интервал между рекламными блоками и макеты карточек на страницах, управляемых CMS. Нетехническое наложение позволяет избежать сложности DevTools.
Преподаватели и студенты
Обучение принципам дизайна, теории сеток и адаптивным макетам в режиме реального времени в браузере. Наглядные демонстрации в реальном времени без внешних инструментов.