CRX id
pmkbdhlmjbnmmpeecekhplejmlmeapog
pmkbdhlmjbnmmpeecekhplejmlmeapog
Description from extension meta
Mjerite udaljenosti i mreže savršene do piksela na bilo kojoj web stranici.
Image from store
Description from store
Točnost piksela je tihi junak izvrsnog dizajna. Neusklađenost od jednog piksela može poremetiti ritam mreže, učiniti da tekst izgleda necentrirano ili uzrokovati da cijela komponenta izgleda „gotovo ispravno“, ali ne sasvim. Grid Ruler Lite pruža front-end programerima, UI/UX dizajnerima, QA testerima i svima kojima je stalo do vizualnog sjaja trenutni set alata za mjerenje unutar preglednika - bez teškog softvera za dizajn, bez pretrpanih DevTools panela i bez snimaka zaslona umetnutih u vanjske aplikacije. Jednim klikom proširenje prekriva ravnalo promjenjive veličine, vodiče za pričvršćivanje na mrežu i opcionalne osnovne mreže preko bilo koje web stranice tako da možete provjeriti razmak, provjeriti mreže od 8 točaka i snimiti dokaze o greškama u rasporedu u sekundama.
Po čemu se Grid Ruler Lite ističe?
Aktivacija jednim klikom, otpuštanje jednim klikom
Kliknite ikonu alatne trake (ili pozovite prečac koji ste postavili u postavkama tipkovnice preglednika) i proširenje će ubrizgati lagani<canvas> prekrivanje (overlay) enkapsulirano u vlastitom Shadow-DOM-u. CSS vaše stranice ne može se miješati, a prekrivanje nikada ne mijenja DOM stablo koje testirate. Kliknite ponovno i svaki vodič, mreža i oznaka nestaju - nema ponovnog učitavanja stranice, nema zaostalih slušača događaja.
Zašto ćete ga htjeti u svom kompletu alata
Uštedite vrijeme: Mjerenje ispuna u DevToolsima zahtijeva dubinsko proučavanje ugniježđenih okvira i mentalno dodavanje vrijednosti obruba i margina. Grid Ruler Lite vizualno prikazuje udaljenosti jednim povlačenjem.
Smanjite greške: Uhvatite sitne regresije razmaka prije nego što dođu do faze pripreme ili, još gore, produkcije - posebno u responzivnim točkama prekida gdje QA oči ne padaju uvijek na pamet.
Poboljšajte suradnju: Dizajneri mogu izravno prekriti mrežu od 8 točaka na implementiranoj verziji i podijeliti snimku zaslona, dajući programerima točne povratne informacije o pikselima bez Figma komentara.
Ostanite fokusirani: Nema pritiskanja tipke Alt-Tab u Photoshopu ili otvaranja Sketch datoteka samo za mjerenje gumba. Sve se događa preko aktivne stranice, točno onako kako je krajnji korisnici vide.
Edukacija i dokumentiranje: Voditelji proizvoda i tehnički pisci mogu demonstrirati ponašanje izgleda pomoću snimaka zaslona ravnala, čineći specifikacije jasnijima za sve dionike.
Ciljne korisničke skupine
Korisnička grupa
Front-end programeri
Potrebno je provjeriti CSS razmak, razmake u flexboxu i poravnanje komponenti preko točaka prekida. Povucite ravnala, pričvrstite na rubove, zaključajte vodilice, izvezite snimke zaslona za PR preglede.
UI/UX dizajneri
Mora potvrditi da razvojne verzije poštuju sustave dizajna od 8 ili 10 točaka. Prekrivanje osnovnih mreža, mjerenje ispuna, dijeljenje označenih PNG-ova.
QA testeri
Prijavite savršene greške s jasnim dokazima
Brza mjerenja i snimanje zaslona jednom tipkom idu izravno u alate za praćenje grešaka
Urednici sadržaja i voditelji projekata
Provjerite prelom naslova, razmak između oglasnih mjesta i raspored kartica na stranicama koje se pokreću CMS-om. Netehničko preklapanje izbjegava složenost DevToolsa.
Odgajatelji i studenti
Podučavajte principe dizajna, teoriju mreže i responzivne izglede uživo u pregledniku. Vizualne demonstracije u stvarnom vremenu bez vanjskih alata.