CRX id
pmkbdhlmjbnmmpeecekhplejmlmeapog
pmkbdhlmjbnmmpeecekhplejmlmeapog
Description from extension meta
Změřte vzdálenosti a mřížky s přesností na pixel na libovolné webové stránce.
Image from store
Description from store
Přesnost pixelů je tichým hrdinou skvělého designu. I jediný pixel může narušit rytmus mřížky, způsobit, že text bude vycentrovaný, nebo způsobí, že celá komponenta bude vypadat „téměř správně“, ale ne tak docela. Grid Ruler Lite poskytuje front-end vývojářům, UI/UX designérům, QA testerům a všem, kterým záleží na vizuální eleganci, okamžitou sadu nástrojů pro měření přímo v prohlížeči – žádný těžkopádný designový software, žádné přeplněné panely DevTools a žádné snímky obrazovky přesouvané do externích aplikací. Jediným kliknutím toto rozšíření zobrazí na jakékoli webové stránce pravítko s možností změny velikosti, vodítka přichycená k mřížce a volitelné základní mřížky, takže můžete během několika sekund zkontrolovat rozestupy, ověřit 8bodové mřížky a zachytit důkazy o chybách v rozvržení.
Co odlišuje Grid Ruler Lite?
Aktivace jedním kliknutím, zrušení jedním kliknutím
Klikněte na ikonu panelu nástrojů (nebo spusťte zkratku, kterou jste nastavili v nastavení klávesnice prohlížeče) a rozšíření vloží odlehčený<canvas> překrytí zapouzdřené ve vlastním Shadow-DOMu. CSS vaší stránky nemůže zasahovat a překrytí nikdy nezmění testovaný DOM strom. Klikněte znovu a všechny vodítka, mřížky a popisky zmizí – žádné opětovné načítání stránky, žádné přetrvávající posluchače událostí.
Proč ho budete chtít mít ve své sadě nástrojů
Úspora času: Měření odsazení v DevTools vyžaduje hloubkové analýzu vnořených rámečků a mentální přidávání hodnot ohraničení a okrajů. Grid Ruler Lite zobrazuje vzdálenosti vizuálně jedním přetažením.
Omezení chyb: Zachyťte drobné regrese s rozestupy dříve, než se dostanou do fáze testování nebo, co je horší, do produkčního prostředí – zejména v responzivních bodech přerušení, kde se QA oko ne vždy zaměří.
Zlepšení spolupráce: Návrháři mohou překrýt 8bodovou mřížku přímo na nasazené sestavení a sdílet snímek obrazovky, čímž vývojářům poskytnou přesnou zpětnou vazbu v pixelech bez komentářů Figmy.
Soustředěnost: Žádné stisknutí klávesy Alt+Tab ve Photoshopu ani otevírání souborů Sketch jen kvůli měření tlačítka. Vše se děje na živé stránce, přesně tak, jak ji vidí koncoví uživatelé.
Vzdělávání a dokumentace: Produktoví manažeři a techničtí autoři mohou demonstrovat chování rozvržení pomocí snímků obrazovky s pravítkem, což usnadňuje specifikace a usnadňuje je tak všem zúčastněným stranám.
Cílové uživatelské skupiny
Skupina uživatelů
Front-end vývojáři
Potřeba ověřit rozteče CSS, mezery flexboxů a zarovnání komponent přes zarážky. Přetahování pravítek, přitahování k hranám, uzamčení vodítek, export snímků obrazovky pro PR kontroly.
UI/UX designéři
Musí potvrdit, že vývojářské sestavení respektuje 8bodové nebo 10bodové designové systémy. Překrývá základní mřížky, měří odsazení, sdílí anotované PNG soubory.
QA testeři
Nahlaste pixelově dokonalé chyby s jasnými důkazy
Rychlá měření a pořízení snímků obrazovky jedním tlačítkem se přenášejí přímo do systému sledování chyb
Redaktoři obsahu a projektoví manažeri
Kontrola obtékání nadpisů, rozestupů reklamních bloků a rozvržení karet na stránkách řízených systémem CMS. Netechnické překrytí eliminuje složitost DevTools.
Pedagogové a studenti
Výuka principů designu, teorie mřížek a responzivních rozvržení živě v prohlížeči Vizuální demonstrace v reálném čase bez externích nástrojů