CRX id
pmkbdhlmjbnmmpeecekhplejmlmeapog
pmkbdhlmjbnmmpeecekhplejmlmeapog
Description from extension meta
Zmierz odległości i siatki co do piksela na dowolnej stronie internetowej.
Image from store
Description from store
Dokładność pikseli to cichy bohater świetnego designu. Nieprawidłowe wyrównanie jednego piksela może zaburzyć rytm siatki, sprawić, że tekst będzie wydawał się niecentralny lub cały komponent będzie wyglądał „prawie dobrze”, ale nie do końca. Grid Ruler Lite zapewnia programistom front-end, projektantom UI/UX, testerom QA i każdemu, kto dba o wizualny szlif, natychmiastowy zestaw narzędzi pomiarowych w przeglądarce — bez ciężkiego oprogramowania projektowego, bez zaśmieconych paneli DevTools i bez zrzutów ekranu przetasowanych w zewnętrznych aplikacjach. Jednym kliknięciem rozszerzenie nakłada na dowolną stronę internetową zmienną linijkę, prowadnice przyciągania do siatki i opcjonalne siatki bazowe, dzięki czemu możesz sprawdzić odstępy, zweryfikować siatki 8-punktowe i uchwycić dowody błędów układu w ciągu kilku sekund.
Czym wyróżnia się Grid Ruler Lite?
Aktywacja jednym kliknięciem, odrzucenie jednym kliknięciem
Kliknij ikonę na pasku narzędzi (lub wywołaj skrót ustawiony w ustawieniach klawiatury przeglądarki), a rozszerzenie wstrzyknie lekką<canvas> nakładka zamknięta w jej własnym Shadow-DOM. CSS Twojej strony nie może przeszkadzać, a nakładka nigdy nie zmienia testowanego drzewa DOM. Kliknij ponownie, a wszystkie prowadnice, siatki i etykiety znikną — bez przeładowywania strony, bez zalegających nasłuchów zdarzeń.
Dlaczego warto mieć go w swoim zestawie narzędzi
Oszczędź czas: Mierzenie wypełnień w DevTools wymaga wiercenia w zagnieżdżonych polach i mentalnego dodawania wartości obramowania i marginesu. Grid Ruler Lite pokazuje odległości wizualnie za jednym pociągnięciem.
Ogranicz liczbę błędów: Wychwytuj drobne regresje odstępów zanim dotrą do etapu przygotowawczego lub, co gorsza, do produkcji — zwłaszcza w punktach przerwania reakcji, na które zespół ds. zapewnienia jakości nie zawsze zwraca uwagę.
Ulepszona współpraca: Projektanci mogą nakładać 8-punktową siatkę bezpośrednio na wdrożoną kompilację i udostępniać zrzuty ekranu, przekazując programistom dokładne informacje zwrotne o pikselach bez komentarzy Figmy.
Pozostań skupiony: Nie ma alt-tabowania w Photoshopie ani otwierania plików Sketch tylko po to, aby zmierzyć przycisk. Wszystko dzieje się na stronie na żywo, dokładnie tak, jak widzą to użytkownicy końcowi.
Edukacja i dokumentacja: Menedżerowie produktu oraz autorzy dokumentacji technicznej mogą demonstrować zachowanie układu za pomocą zrzutów ekranu linijki, dzięki czemu dokumenty specyfikacji staną się bardziej przejrzyste dla wszystkich interesariuszy.
Grupy użytkowników docelowych
Grupa użytkowników
Programiści front-end
Należy sprawdzić odstępy CSS, przerwy w polach flexbox i wyrównanie komponentów w punktach przerwania. Przeciągaj linijki, przyciągaj do krawędzi, blokuj prowadnice, eksportuj zrzuty ekranu do przeglądów PR.
Projektanci UI/UX
Należy potwierdzić, że kompilacje deweloperskie są zgodne z 8- lub 10-punktowymi systemami projektowymi. Nakładaj siatki bazowe, mierz wypełnienia, udostępniaj adnotowane pliki PNG.
Testerzy QA
Zgłaszaj błędy z dokładnością do piksela, mając wyraźne dowody
Szybkie pomiary i zrzuty ekranu wykonywane jednym klawiszem trafiają bezpośrednio do systemów śledzenia błędów
Redaktorzy treści i kierownicy projektów
Sprawdź zawijanie nagłówków, odstępy między slotami reklamowymi i układy kart na stronach obsługiwanych przez CMS. Nakładka nietechniczna pozwala uniknąć złożoności narzędzi programistycznych
Nauczyciele i studenci
Nauczaj zasad projektowania, teorii siatki i układów responsywnych na żywo w przeglądarce. Wizualne demonstracje w czasie rzeczywistym bez użycia narzędzi zewnętrznych.