CRX id
pmkbdhlmjbnmmpeecekhplejmlmeapog
pmkbdhlmjbnmmpeecekhplejmlmeapog
Description from extension meta
Mät pixelperfekta avstånd och rutnät på vilken webbsida som helst.
Image from store
Description from store
Pixelnoggrannhet är den tysta hjälten i bra design. En enda pixelfeljustering kan bryta rytmen i ett rutnät, få text att kännas excentrisk eller få en hel komponent att se "nästan rätt" ut men inte riktigt. Grid Ruler Lite ger frontend-utvecklare, UI/UX-designers, QA-testare och alla som bryr sig om visuell finish en omedelbar mätverktygslåda i webbläsaren – ingen tung designprogramvara, inga röriga DevTools-paneler och inga skärmdumpar som blandas in i externa appar. Med ett enda klick lägger tillägget en anpassningsbar linjal, fäst-till-rutnätsguider och valfria baslinjerutnät ovanpå vilken webbsida som helst så att du kan kontrollera avstånd, verifiera 8-punktsrutnät och fånga bevis på layoutfel på några sekunder.
Vad gör att Grid Ruler Lite sticker ut?
Aktivering med ett klick, avstängning med ett klick
Klicka på verktygsfältsikonen (eller anropa genvägen du angett i webbläsarens tangentbordsinställningar) så injicerar tillägget en lättviktig<canvas> överlägget är inkapslat i sin egen Shadow-DOM. Din sidas CSS kan inte störa, och överlägget ändrar aldrig DOM-trädet du testar. Klicka igen så försvinner alla guider, rutnät och etiketter – ingen sidladdning, inga kvarvarande händelselyssnare.
Varför du vill ha det i din verktygslåda
Spara tid: Att mäta utfyllnader i DevTools kräver att man borrar i kapslade rutor och mentalt lägger till kant- och marginalvärden. Grid Ruler Lite visar avstånd visuellt med ett enda drag.
Minska buggar: Upptäck små avståndsregressioner innan de når staging eller, ännu värre, produktion – särskilt vid responsiva brytpunkter där QA-ögon inte alltid landar.
Förbättra samarbetet: Designers kan lägga 8-punktsrutnätet direkt över en distribuerad version och dela en skärmdump, vilket ger utvecklarna exakt pixelfeedback utan Figma-kommentarer.
Håll fokus: Inget behov av att alt-tabba i Photoshop eller öppna Sketch-filer bara för att mäta en knapp. Allt sker på livesidan, precis som slutanvändarna ser det.
Utbilda och dokumentera: Produktchefer och tekniska skribenter kan demonstrera layoutbeteende med skärmdumpar av linjaler, vilket gör specifikationsdokument tydligare för alla intressenter.
Målgrupp för användaranvändare
Användargrupp
Frontend-utvecklare
Behöver verifiera CSS-avstånd, flexbox-gap och komponentjustering över brytpunkter. Dra linjaler, fäst mot kanter, lås stödlinjer, exportera skärmdumpar för PR-granskningar.
UI/UX-designers
Måste bekräfta att utvecklarbyggen respekterar 8-punkts eller 10-punkts designsystem. Överlagra baslinjenät, mät utfyllnader, dela kommenterade PNG-filer.
QA-testare
Rapportera pixelperfekta buggar med tydliga bevis
Snabba mätningar och skärmdumpar med en knapptryckning går direkt till buggspårarna
Innehållsredaktörer och projektledare
Kontrollera rubrikomslag, annonsplatsavstånd och kortlayouter på CMS-drivna sidor. Icke-teknisk överlagring undviker komplexitet med DevTools.
Lärare och studenter
Lär ut designprinciper, rutnätsteori och responsiva layouter live i webbläsaren. Visuella demonstrationer i realtid utan externa verktyg.