Measure Distance îți permite să dai clic pe orice două elemente dintr-o pagină web și să vezi imediat distanța exactă în pixeli dintre ele — pe orizontală (X), pe verticală (Y) și diagonal. Linii de conexiune vizuale cu etichete de măsurare apar între elemente, iar o bară de informații afișează dimensiunile ambelor elemente și distanțele în toate cele trei direcții.
Verificarea spațierii dintre două elemente în browser DevTools necesită să treci cu mouse-ul peste fiecare element separat, să citești valorile de margin/padding și să faci calcule mentale pentru a determina distanța vizuală reală. Measure Distance elimină complet acest proces. Dai clic pe Elementul A, dai clic pe Elementul B, iar distanțele exacte în pixeli apar imediat — X (orizontal), Y (vertical) și diagonal — afișate ca linii etichetate ce conectează direct cele două elemente pe pagină. Instrumentul măsoară de la marginile elementelor (bounding boxes), astfel că valorile reprezintă spațiul vizual real dintre elemente, așa cum îl vede utilizatorul. Aceasta diferă de citirea valorilor de margin/padding, care nu țin cont de efectul cumulativ al mai multor proprietăți de spațiere. Fiecare element selectat este evidențiat cu un chenar colorat și afișează propriile dimensiuni (lățime × înălțime), astfel că poți vedea atât dimensiunile elementelor, cât și spațierea dintre ele într-o singură privire.
Dă clic pe primul element (evidențiat cu un chenar albastru), apoi pe al doilea element (evidențiat cu un chenar verde). Distanțele dintre bounding boxes-urile lor sunt calculate și afișate instantaneu. Fără glisare, fără introducere manuală — doar două clicuri.
Vezi simultan distanța orizontală (X), distanța verticală (Y) și distanța diagonală — fiecare afișată cu propria linie de măsurare codificată cromatic și etichetă. X în chihlimbar, Y în roșu, diagonala în violet.
Linii de măsurare întrerupte conectează direct cele două elemente selectate pe pagină, cu etichete de distanță poziționate la mijlocul fiecărei linii. Reprezentarea vizuală clarifică imediat ce se măsoară.
Fiecare element selectat afișează propriile dimensiuni lățime × înălțime într-o etichetă mică. Aceasta îți permite să vezi atât dimensiunile elementelor, cât și spațierea dintre ele în aceeași vizualizare — fără a comuta între instrumente.
Dă clic pe o nouă pereche de elemente pentru a actualiza instantaneu măsurătorile. Nu este nevoie să dezactivezi și să reactivezi instrumentul. Liniile de măsurare anterioare sunt înlocuite cu altele noi pentru noua pereche de elemente.
O bară de informații persistentă în partea de jos a viewport-ului afișează un rezumat compact: numele și dimensiunile ambelor elemente, plus toate cele trei valori de distanță (X, Y, diagonală). Ușor de copiat pentru a fi lipit în rapoarte de bug-uri sau feedback de design.
Macheta spune că butonul ar trebui să fie la 24px sub titlu. Dă clic pe titlu, dă clic pe buton și confirmă că distanța Y este exact 24px. Detectează discrepanțe subtile de spațiere care sunt invizibile ochiului, dar specificate în token-urile de design.
Măsoară distanța dintre Card 1 și Card 2, apoi dintre Card 2 și Card 3. Dacă spațiile nu sunt identice, ai găsit o inconsistență — cauzată cel mai probabil de margin-uri diferite sau o problemă cu gap-ul de flexbox.
Măsoară distanțele dintre elemente la lățimea desktop, apoi redimensionează browserul și măsoară din nou la lățimea mobilă. Verifică că spațierea se scalează corect între breakpoint-uri și că ajustările responsive de margin/padding funcționează conform designului.
Include măsurători precise în rapoartele tale de bug-uri: "Spațiul dintre nav și hero este de 47px, ar trebui să fie 32px conform specificației de design." Valorile din bara de informații pot fi copiate direct în tichetele Jira sau problemele GitHub.
Dă clic pe două elemente care ar trebui să fie aliniate orizontal. Dacă distanța Y este 0px, sunt perfect aliniate. Orice valoare Y diferită de zero indică o nealiniere verticală — numărul exact îți spune cu câți pixeli este decalat.
Deschide bara flotantă DevSuite Pro și dă clic pe iconița Measure Distance. Cursorul se transformă într-un vizor, indicând că poți selecta primul element.
Dă clic pe orice element de pe pagină. Acesta este evidențiat cu un chenar albastru și etichetat "Element A" cu dimensiunile sale (lățime × înălțime în pixeli).
Dă clic pe un al doilea element. Acesta este evidențiat cu un chenar verde și etichetat "Element B." Liniile de măsurare apar imediat conectând cele două elemente.
Apar trei linii de măsurare: orizontală (X) în chihlimbar, verticală (Y) în roșu și diagonală în violet. Fiecare linie are o etichetă ce afișează distanța în pixeli. Bara de informații din partea de jos rezumă toate valorile.
Dă clic pe o altă pereche de elemente pentru a măsura o nouă distanță instantaneu. Dă clic pe iconița Measure Distance din bara flotantă pentru a dezactiva instrumentul când ai terminat.
Instalează DevSuite Pro gratuit și deblochează peste 39 de instrumente pentru dezvoltatori în browserul tău.
