CRX id
pmkbdhlmjbnmmpeecekhplejmlmeapog
pmkbdhlmjbnmmpeecekhplejmlmeapog
Description from extension meta
Meet pixel-perfecte afstanden en rasters op elke webpagina.
Image from store
Description from store
Pixelnauwkeurigheid is de stille held van een geweldig ontwerp. Een foutieve uitlijning van één pixel kan het ritme van een raster verstoren, ervoor zorgen dat tekst niet in het midden staat, of ervoor zorgen dat een heel onderdeel er "bijna goed" uitziet, maar net niet helemaal. Grid Ruler Lite biedt front-end developers, UI/UX-ontwerpers, QA-testers en iedereen die waarde hecht aan visuele verfijning een directe, in-browser meettoolkit – geen zware ontwerpsoftware, geen rommelige DevTools-panelen en geen screenshots die in externe apps worden verplaatst. Met één klik plaatst de extensie een aanpasbare liniaal, hulplijnen voor het uitlijnen op het raster en optionele basislijnrasters over elke webpagina, zodat u de spatiëring kunt controleren, 8-puntsrasters kunt verifiëren en binnen enkele seconden bewijs van lay-outfouten kunt vastleggen.
Wat maakt Grid Ruler Lite zo bijzonder?
Activering met één klik, verwijdering met één klik
Klik op het pictogram van de werkbalk (of gebruik de snelkoppeling die u in de toetsenbordinstellingen van uw browser hebt ingesteld) en de extensie injecteert een lichtgewicht<canvas> overlay ingekapseld in zijn eigen Shadow-DOM. De CSS van je pagina kan er niet tussen komen en de overlay verandert nooit de DOM-boom die je test. Klik nogmaals en elke gids, raster en label verdwijnt – geen pagina herladen, geen slepende event listeners.
Waarom u het in uw gereedschapskist wilt hebben
Bespaar tijd: Het meten van paddings in DevTools vereist het boren in geneste vakken en het mentaal toevoegen van rand- en margewaarden. Grid Ruler Lite toont afstanden visueel met één sleepbeweging.
Bugs verminderen: Ontdek kleine spatieregressies voordat ze de staging- of, erger nog, productiefase bereiken. Dit is vooral belangrijk bij responsieve breekpunten waar de QA-ogen niet altijd op kunnen richten.
Verbeter de samenwerking: ontwerpers kunnen het 8-punts raster rechtstreeks over een geïmplementeerde build heen leggen en een schermafbeelding delen. Zo krijgen ontwikkelaars exacte pixelfeedback zonder Figma-opmerkingen.
Blijf gefocust: Geen alt-tabs in Photoshop of Sketch-bestanden openen om een knop te meten. Alles gebeurt op de livepagina, precies zoals eindgebruikers het zien.
Educatie en documentatie: productmanagers en technisch schrijvers kunnen lay-outgedrag demonstreren met liniaalscreenshots, waardoor specificatiedocumenten duidelijker worden voor alle belanghebbenden.
Doelgroepgebruikers
Gebruikersgroep
Front-endontwikkelaars
CSS-afstand, flexbox-gaten en componentuitlijning over breekpunten moeten worden gecontroleerd. Linialen slepen, aan randen vastklikken, hulplijnen vergrendelen, schermafbeeldingen exporteren voor PR-beoordelingen.
UI/UX-ontwerpers
Moet bevestigen dat de ontwikkelaar builds respect hebben voor 8-punts of 10-punts ontwerpsystemen. Overlay basislijnrasters, meet opvullingen, deel geannoteerde PNG's.
QA-testers
Rapporteer pixel-perfecte bugs met duidelijk bewijs
Snelle metingen en screenshots met één toets gaan rechtstreeks naar bugtrackers
Contentredacteuren en projectmanagers
Controleer de kopregel, de ruimte tussen de advertentiesleuven en de kaartindelingen op CMS-gestuurde pagina's. Niet-technische overlay voorkomt complexiteit van DevTools.
Onderwijzers en studenten
Onderwijs ontwerpprincipes, rastertheorie en responsieve lay-outs live in de browser Visuele, realtime demonstraties zonder externe hulpmiddelen