CRX id
pmkbdhlmjbnmmpeecekhplejmlmeapog
pmkbdhlmjbnmmpeecekhplejmlmeapog
Description from extension meta
Mérjen pixelpontos távolságokat és rácsokat bármely weboldalon.
Image from store
Description from store
A pixelpontosság a nagyszerű dizájn csendes hőse. Egyetlen pixeles igazítási hiba is megtörheti a rács ritmusát, a szöveg középponttól való eltérését okozhatja, vagy akár azt is okozhatja, hogy egy egész komponens „majdnem helyesnek” tűnik, de mégsem egészen. A Grid Ruler Lite azonnali, böngészőn belüli mérőeszközkészletet biztosít a front-end fejlesztőknek, UI/UX tervezőknek, minőségbiztosítási tesztelőknek és bárkinek, akit érdekel a vizuális csiszolás – nincsenek nehézkes tervezőszoftverek, nincsenek zsúfolt DevTools panelek, és nincsenek külső alkalmazásokba kevert képernyőképek. A bővítmény egyetlen kattintással átméretezhető vonalzót, rácshoz illeszthető segédvonalakat és opcionális alaprácsokat jelenít meg bármely weboldal tetején, így másodpercek alatt ellenőrizheted a térközöket, hitelesítheted a 8 pontos rácsokat, és rögzítheted az elrendezési hibák bizonyítékait.
Mi teszi a Grid Ruler Lite-ot különlegessé?
Egy kattintásos aktiválás, egy kattintásos elvetés
Kattintson az eszköztár ikonjára (vagy hívja meg a böngésző billentyűzetbeállításaiban beállított parancsikont), és a bővítmény egy könnyű<canvas> saját Shadow-DOM-ba ágyazott overlay. Az oldalad CSS-e nem avatkozhat bele, és az overlay soha nem módosítja a tesztelt DOM-fát. Újrakattintva minden segédvonal, rács és címke eltűnik – nincs oldal újratöltés, nincsenek hátralévő eseményfigyelők.
Miért szeretnéd, hogy a szerszámosládában legyen?
Időt takaríthat meg: A DevTools-ban a kitöltés méréséhez beágyazott mezőkbe kell lépni, és mentálisan meg kell adni a szegély- és margóértékeket. A Grid Ruler Lite egyetlen húzással vizuálisan megjeleníti a távolságokat.
Hibák csökkentése: Apró távolságbeli regressziókat észlelhet, mielőtt azok elérnék a próbaüzemet, vagy ami még rosszabb, az éles környezetet – különösen a reagáló töréspontokban, ahol a minőségbiztosítási szemek nem mindig érkeznek meg.
Javított együttműködés: A tervezők közvetlenül a telepített buildre vetíthetik a 8 pontos rácsot, és megoszthatnak egy képernyőképet, így Figma-kommentárok nélkül pontos pixel-visszajelzést adva a fejlesztőknek.
Fókuszálj: Nem kell a Photoshopban az Alt billentyűt lenyomva tartani, vagy Sketch fájlokat megnyitni csak egy gomb méréséhez. Minden az élő oldalon történik, pontosan úgy, ahogy a végfelhasználók látják.
Oktatás és dokumentálás: A termékmenedzserek és a műszaki írók vonalzó képernyőképekkel mutathatják be az elrendezés működését, így a specifikációs dokumentumok minden érdekelt fél számára érthetőbbek lesznek.
Célzott felhasználói csoportok
Felhasználói csoport
Front-end fejlesztők
CSS térközök, flexbox hézagok és az alkatrészek igazításának ellenőrzése a töréspontokon keresztül Vonalzók húzása, élekhez igazítás, segédvonalak rögzítése, képernyőképek exportálása PR-ellenőrzésekhez
UI/UX tervezők
Meg kell erősíteni, hogy a fejlesztői buildek tiszteletben tartják-e a 8 vagy 10 pontos tervezési rendszereket. Alaprácsok átfedése, kitöltés mérése, jegyzetekkel ellátott PNG-k megosztása.
QA tesztelők
Jelentsen pixelpontos hibákat egyértelmű bizonyítékokkal
A gyors mérések és az egygombos képernyőkép-készítés közvetlenül a hibakövetőkbe kerül
Tartalomszerkesztők és PM-ek
Címsortörés, hirdetéshely-közök és kártyaelrendezések ellenőrzése CMS-vezérelt oldalakon. A nem technikai jellegű átfedés elkerüli a DevTools bonyolultságát.
Oktatók és diákok
Tanítsd meg a tervezési alapelveket, a rácselméletet és a reszponzív elrendezéseket élőben a böngészőben. Vizuális, valós idejű bemutatók külső eszközök nélkül.