CRX id
pmkbdhlmjbnmmpeecekhplejmlmeapog
pmkbdhlmjbnmmpeecekhplejmlmeapog
Description from extension meta
Mål pikselperfekte avstander og rutenett på enhver nettside.
Image from store
Description from store
Pikselnøyaktighet er den stille helten i god design. En feiljustering på én piksel kan bryte rytmen i et rutenett, få tekst til å føles ute av sentrum, eller føre til at en hel komponent ser «nesten riktig» ut, men ikke helt. Grid Ruler Lite gir frontend-utviklere, UI/UX-designere, QA-testere og alle som bryr seg om visuell polering et øyeblikkelig måleverktøysett i nettleseren – ingen tung designprogramvare, ingen rotete DevTools-paneler og ingen skjermbilder som er blandet inn i eksterne apper. Med et enkelt klikk legger utvidelsen en skalerbar linjal, feste-til-rutenett-guider og valgfrie grunnlinjerutenett oppå enhver nettside, slik at du kan sjekke avstand, verifisere 8-punkts rutenett og fange opp bevis på layoutfeil på sekunder.
Hva gjør at Grid Ruler Lite skiller seg ut?
Aktivering med ett klikk, avvisning med ett klikk
Klikk på verktøylinjeikonet (eller bruk snarveien du angir i tastaturinnstillingene i nettleseren), så injiserer utvidelsen en lettvektsfunksjon.<canvas> overlegget er innkapslet i sin egen skygge-DOM. Sidens CSS kan ikke forstyrre, og overlegget endrer aldri DOM-treet du tester. Klikk igjen, og alle guider, rutenett og etiketter forsvinner – ingen sideinnlasting, ingen vedvarende hendelseslyttere.
Hvorfor du vil ha det i verktøykassen din
Spar tid: Måling av marginer i DevTools krever at man borer i nestede bokser og mentalt legger til kant- og margverdier. Grid Ruler Lite viser avstander visuelt med ett drag.
Reduser feil: Fang opp små regresjoner med avstand før de når staging eller, enda verre, produksjon – spesielt i responsive brytepunkter der QA-øynene ikke alltid lander.
Forbedret samarbeid: Designere kan legge 8-punktsrutenettet direkte over en distribuert versjon og dele et skjermbilde, noe som gir utviklere nøyaktig pikseltilbakemelding uten Figma-kommentarer.
Hold fokus: Ingen alt-tabbing i Photoshop eller åpning av Sketch-filer bare for å måle en knapp. Alt skjer på den aktive siden, akkurat slik sluttbrukerne ser det.
Opplær og dokumenter: Produktsjefer og tekniske skribenter kan demonstrere layoutens virkemåte med skjermbilder av linjaler, noe som gjør spesifikasjonsdokumenter tydeligere for alle interessenter.
Målgruppe for brukere
Brukergruppe
Frontend-utviklere
Trenger å bekrefte CSS-avstand, flexbox-gap og komponentjustering på tvers av bruddpunkter. Dra linjaler, fest til kanter, lås hjelpelinjer, eksporter skjermbilder for PR-gjennomganger.
UI/UX-designere
Må bekrefte at utviklerbygg respekterer 8-punkts eller 10-punkts designsystemer. Legg over grunnlinjenett, mål polstring, del kommenterte PNG-er.
QA-testere
Rapporter pikselperfekte feil med klare bevis
Raske målinger og skjermbildeopptak med ett trykk går rett inn i feilsporing
Innholdsredaktører og prosjektledere
Sjekk overskriftsbryting, avstand mellom annonseplasser og kortoppsett på CMS-drevne sider. Ikke-teknisk overlegg unngår kompleksitet i DevTools.
Lærere og studenter
Lær designprinsipper, gridteori og responsive layouter direkte i nettleseren. Visuelle demonstrasjoner i sanntid uten eksterne verktøy.