Pixel Ruler

Folosește Pixel Ruler pentru a măsura pixeli pe orice pagină web: o riglă pe ecran pentru dimensiuni și spațieri.

Pixel Ruler pune o riglă peste ecran și îți dă voie să măsori orice în browser. Dă clic pe pictograma din bara de instrumente, trage cu mouse-ul peste layout și citește distanța exactă în pixeli CSS. Treci cursorul peste un element și primești lățimea, înălțimea, padding-ul și spațiile până la blocurile din jur. Cifrele coincid cu DevTools, pentru că extensia citește exact aceiași pixeli CSS cu care browserul desenează pagina. Niciun panou de deschis, nicio captură de ecran de exportat, niciun calcul în minte. Doar o riglă pe ecran, peste site-ul la care te uiți oricum. Un singur strat, nimic între care să comuți: 📏 Ține apăsat și trage ca să măsori distanța dintre oricare două puncte din pagină. 📏 Indică un element și îi vezi dimensiunea, padding-ul și distanțele până la vecini. 📏 Lasă ghidaje verticale și orizontale și aliniază blocurile după ele. Ai mereu o riglă pe ecran ca reper, iar o singură tastă copiază rezultatul în clipboard împreună cu selectorul CSS al elementului de sub cursor. Cum începi, în trei pași: 1. Instalează extensia și fixeaz-o în bara de instrumente. 2. Deschide pagina la care lucrezi și dă clic pe pictogramă. 3. Trage, indică, măsoară — apasă Esc de două ori când ai terminat. Dezvoltatorii front-end o folosesc ca să verifice layout-ul față de machetă. Designerii o folosesc pe post de riglă pentru pagină atunci când fișierul de handoff a rămas deja în urmă. Testerii QA raportează un bug cu un număr real, nu cu "butonul pare puțin prea jos". Oricine are nevoie de o măsurătoare rapidă în pixeli pe un site live o obține din două clicuri. Ce îți oferă această riglă pentru web: - distanța dintre oricare două puncte, în pixeli - lățimea și înălțimea oricărui element din pagină - padding, margini și spațiile dintre vecini - distanțele de la un element la blocurile din jurul lui - gradații pe marginea de sus și pe cea din stânga a ferestrei - eticheta, clasele și selectorul CSS al elementului măsurat - ghidaje reutilizabile pentru verificarea alinierii Controlul de la tastatură ține cursorul nemișcat: → Shift blochează măsurătoarea pe axa orizontală sau verticală → Săgețile mută punctul curent cu exact 1 px → Esc șterge măsurătoarea curentă, al doilea Esc îți dă pagina înapoi → O scurtătură copiază rezultatul în clipboard O instalezi o dată și ai aceeași riglă de pixeli pe care o folosesc utilizatorii de Windows, Linux și ChromeOS, și aceeași riglă de pixeli pe care o folosesc utilizatorii de Mac, pentru că instrumentul stă în browser, nu în sistemul de operare. Nu ai ce descărcare de riglă de pixeli să cauți, nu există program de instalare și nu îți trebuie drepturi de administrator: extensia vine din Chrome Web Store dintr-un singur clic. La lansare este o riglă de pixeli gratuită, cu toate funcțiile deschise pentru toată lumea. O aplicație de riglă pentru ecran care se deschide într-o fereastră separată începe să măsoare altceva de îndată ce pagina se derulează. Această riglă de pixeli este desenată în interiorul filei și se derulează odată cu conținutul. Aceasta este o riglă de pixeli online: funcționează pe pagina live, pe un server de staging, pe site-ul unui client, în spatele unei autentificări. O riglă de pixeli pentru desktop, care măsoară o poză statică a ferestrei, nu poate face asta. Trebuie să verifici o ilustrație sau un logo? Folosește-o ca riglă de pixeli pentru imagini — treci cursorul peste poză și citește dimensiunea la care este afișată, care de multe ori nu este dimensiunea din fișierul sursă. Întrebări și răspunsuri Î: Cum măsor pixelii de pe ecran fără să deschid DevTools? R: Dă clic pe pictogramă și trage. Stratul stă deasupra paginii, așa că măsori exact ce vezi, inclusiv stările de hover care dispar când un panou fură focusul. Î: Riglă pe ecran, riglă în pixeli, riglă px, screen ruler, px ruler, pixelruler — care dintre ele este asta? R: Toate. Instrumentul e același, se schimbă doar expresia căutată. Î: Poate măsura în centimetri sau în inci? R: Nu. Este un instrument de tip riglă de pixeli și raportează numai pixeli CSS, unitatea pe care o scrii în foaia de stil. Î: Funcționează peste tot? R: Pe site-urile obișnuite, da. Paginile de sistem ale Chrome, cititorul PDF încorporat și interiorul unui iframe cross-origin sunt închise pentru orice extensie, inclusiv pentru aceasta. Î: Ce date colectează? R: Niciunele. Zero cereri de rețea, fără cont, fără înregistrare. Nu cere nicio permisiune înfricoșătoare la instalare și atinge pagina doar după ce dai clic pe pictogramă. Obiceiurile vechi sunt mai lente și mai imprecise: să ții o riglă de plastic pe sticla monitorului sau să numeri pixelii într-o captură de ecran. O riglă pentru lucrul pe ecranul calculatorului trebuie să stea în browser, să se redeseneze când layout-ul se rearanjează și să vorbească aceleași unități ca și codul. Exact asta face acest strat de riglă peste pagină și de aceea o riglă de pixeli pentru site-uri bate o riglă trasă peste o captură lipită într-un editor grafic. Descrierea este disponibilă în 52 de limbi, așa că o riglă de pixeli pentru web e la o căutare distanță și în limba ta. Instaleaz-o, măsoară pixelii pe următoarea pagină pe care o deschizi și ține rigla pe ecran la un clic distanță tot restul zilei.