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-файлами.
Тестери контролю якості
Повідомляйте про помилки з ідеальною точністю до пікселя та надавайте чіткі докази
Швидкі вимірювання та зйомка екрана одним натисканням кнопки одразу надходять до системи відстеження помилок
Редактори контенту та менеджери проектів
Перевіряйте обтікання заголовків, інтервали між рекламними місцями та макети карток на сторінках, керованих CMS. Нетехнічне накладання дозволяє уникнути складності DevTools.
Викладачі та студенти
Викладайте принципи дизайну, теорію сіток та адаптивні макети в режимі реального часу прямо в браузері. Візуальні демонстрації в режимі реального часу без зовнішніх інструментів.