CRX id
pmkbdhlmjbnmmpeecekhplejmlmeapog
pmkbdhlmjbnmmpeecekhplejmlmeapog
Description from extension meta
Измервайте перфектни с точност до пиксел разстояния и мрежи на всяка уеб страница.
Image from store
Description from store
Точността на пикселите е тихият герой на страхотния дизайн. Дори само един пиксел може да наруши ритъма на мрежата, да накара текста да изглежда нецентриран или да накара целият компонент да изглежда „почти както трябва“, но не съвсем. Grid Ruler Lite предоставя на front-end разработчиците, UI/UX дизайнерите, QA тестерите и всеки, който се интересува от визуален блясък, незабавен набор от инструменти за измерване в браузъра – без тежък софтуер за дизайн, без претрупани панели DevTools и без екранни снимки, преместени във външни приложения. С едно щракване разширението наслагва променяща се оразмеряваща се линийка, водачи за прилепване към мрежата и опционални базови решетки върху всяка уеб страница, така че можете да проверите разстоянието, да потвърдите 8-точкови решетки и да заснемете доказателства за грешки в оформлението за секунди.
Какво отличава Grid Ruler Lite?
Активиране с едно щракване, отхвърляне с едно щракване
Щракнете върху иконата в лентата с инструменти (или извикайте пряката връзка, която сте задали в настройките на клавиатурата на браузъра) и разширението ще инжектира лек<canvas> наслагване, капсулирано в собствен Shadow-DOM. CSS кодът на вашата страница не може да се намесва и наслагването никога не променя DOM дървото, което тествате. Щракнете отново и всеки водач, решетка и етикет изчезва - без презареждане на страницата, без задържащи се слушатели на събития.
Защо ще го искате в инструментариума си
Спестете време: Измерването на допълненията (paddings) в DevTools изисква задълбочаване във вложени полета и мислено добавяне на стойности за граници (border) и отстъпи (margin). Grid Ruler Lite показва разстоянията визуално с едно плъзгане.
Намаляване на грешки: Улавяйте малки регресии с интервал, преди да достигнат етап на подготовка или, още по-лошо, до производство – особено в точки на прекъсване при бързи реакции, където QA експертите не винаги се насочват към тях.
Подобряване на сътрудничеството: Дизайнерите могат да наслагват 8-точковата мрежа директно върху внедрена компилация и да споделят екранна снимка, давайки на разработчиците точна обратна връзка по пиксели без коментари от Figma.
Останете фокусирани: Няма нужда да натискате Alt+Tab във Photoshop или да отваряте Sketch файлове само за да измерите бутон. Всичко се случва на живата страница, точно както я виждат крайните потребители.
Обучение и документиране: Продуктовите мениджъри и техническите писатели могат да демонстрират поведението на оформлението със скрийншотове на линийките, което прави спецификациите по-ясни за всички заинтересовани страни.
Целеви потребителски групи
Потребителска група
Front-End разработчици
Необходимо е да се провери CSS разстоянието, flexbox пролуките и подравняването на компонентите през точките на прекъсване. Плъзгане на линийки, прихващане към ръбове, заключване на водачи, експортиране на екранни снимки за PR прегледи.
UI/UX дизайнери
Трябва да се потвърди, че разработчиците спазват 8-точкови или 10-точкови дизайнерски системи. Наслагване на базови мрежи, измерване на отстъпи, споделяне на анотирани PNG файлове.
QA тестери
Докладвайте перфектни грешки с ясни доказателства
Бързите измервания и заснемането на екранни снимки с един бутон се отвеждат директно в системите за проследяване на грешки
Редактори на съдържание и мениджъри на проекти
Проверете обгръщането на заглавията, разстоянието между рекламните места и оформлението на картите на страници, управлявани от CMS. Нетехническото наслагване избягва сложността на DevTools.
Преподаватели и ученици
Преподавайте принципи на дизайна, теория на мрежите и адаптивни оформления на живо в браузъра. Визуални демонстрации в реално време без външни инструменти.