Measure Distance omogućuje vam da kliknete bilo koja dva elementa na web stranici i odmah vidite točnu pixel udaljenost između njih — horizontalno (X), vertikalno (Y) i dijagonalno. Vizualne spojne linije s označenim mjerenjima pojavljuju se između elemenata, a info traka prikazuje dimenzije oba elementa i udaljenosti u sva tri smjera.
Provjera razmaka između dva elementa u DevTools preglednika zahtijeva zasebno lebdenje nad svakim elementom, čitanje vrijednosti margin/padding i mentalno računanje za izračun stvarne vizualne udaljenosti. Measure Distance to u potpunosti eliminira. Kliknite Element A, kliknite Element B, i točne pixel udaljenosti se odmah pojavljuju — X (horizontalno), Y (vertikalno) i dijagonalno — prikazane kao označene linije koje spajaju dva elementa izravno na stranici. Alat mjeri od rubova elemenata (bounding boxes), pa vrijednosti predstavljaju stvarni vizualni razmak između elemenata kako ih korisnik vidi. To se razlikuje od čitanja vrijednosti margin/padding, koje ne uzimaju u obzir kumulativni učinak više svojstava razmaka. Svaki odabrani element je istaknut obrubom u boji i prikazuje vlastite dimenzije (širina × visina), tako da možete vidjeti i veličine elemenata i razmak između njih u jednom prikazu.
Kliknite prvi element (istaknut plavim obrubom), zatim kliknite drugi element (istaknut zelenim obrubom). Udaljenosti između njihovih bounding box-ova se izračunavaju i odmah prikazuju. Bez povlačenja, bez ručnog unosa — samo dva klika.
Vidite horizontalnu udaljenost (X), vertikalnu udaljenost (Y) i dijagonalnu udaljenost istovremeno — svaka prikazana s vlastitom linijom mjerenja kodiranom bojom i oznakom. X u jantarnoj, Y u crvenoj, dijagonalno u ljubičastoj.
Isprekidane linije mjerenja spajaju dva odabrana elementa izravno na stranici, s oznakama udaljenosti postavljenima na središte svake linije. Vizualni prikaz odmah jasno pokazuje što se mjeri.
Svaki odabrani element prikazuje vlastite dimenzije širine × visine u maloj oznaci. To vam omogućuje da vidite i veličine elemenata i razmak između njih u istom prikazu — bez prebacivanja alata.
Kliknite novi par elemenata za trenutno ažuriranje mjerenja. Nema potrebe za deaktivacijom i ponovnom aktivacijom alata. Prethodne linije mjerenja zamjenjuju se novim za novi par elemenata.
Stalna info traka pri dnu viewport-a prikazuje kompaktan sažetak: nazive i dimenzije oba elementa, plus sve tri vrijednosti udaljenosti (X, Y, dijagonalno). Prilagođeno za kopiranje i lijepljenje u izvještaje o greškama ili povratne informacije o dizajnu.
Maketa kaže da gumb treba biti 24px ispod naslova. Kliknite naslov, kliknite gumb i potvrdite da je Y udaljenost točno 24px. Otkriva suptilne razlike u razmacima koje su nevidljive oku ali specificirane u design token-ima.
Izmjerite udaljenost između Kartice 1 i Kartice 2, zatim između Kartice 2 i Kartice 3. Ako razmaci nisu identični, pronašli ste nedosljednost — vjerojatno uzrokovanu različitim marginama ili problemom s flexbox razmakom.
Izmjerite udaljenosti elemenata pri desktop širini, zatim promijenite veličinu preglednika i izmjerite ponovo pri mobilnoj širini. Provjerite skaliraju li se razmaci ispravno na breakpoint-ovima i rade li responsive margin/padding prilagodbe kao što je dizajnirano.
Uključite precizna mjerenja u svoje izvještaje o greškama: "Razmak između navigacije i hero sekcije je 47px, trebao bi biti 32px prema specifikaciji dizajna." Vrijednosti info trake mogu se kopirati izravno u Jira tikete ili GitHub probleme.
Kliknite dva elementa koji bi trebali biti horizontalno poravnati. Ako je Y udaljenost 0px, savršeno su poravnati. Bilo koja vrijednost Y različita od nule označava vertikalno neporavnanje — točan broj govori vam za koliko je pikselima pomaknut.
Otvorite plutajući dock DevSuite Pro i kliknite ikonu Measure Distance. Kursor se mijenja u nišan, što označava da možete odabrati prvi element.
Kliknite bilo koji element na stranici. Istaknut je plavim obrubom i označen kao "Element A" s njegovim dimenzijama (širina × visina u pikselima).
Kliknite drugi element. Istaknut je zelenim obrubom i označen kao "Element B". Linije mjerenja odmah se pojavljuju spajajući dva elementa.
Pojavljuju se tri linije mjerenja: horizontalna (X) u jantarnoj, vertikalna (Y) u crvenoj i dijagonalna u ljubičastoj. Svaka linija ima oznaku koja prikazuje pixel udaljenost. Info traka pri dnu sažima sve vrijednosti.
Kliknite drugi par elemenata za trenutno mjerenje nove udaljenosti. Kliknite ikonu Measure Distance u docku za deaktivaciju alata kad završite.
Instalirajte DevSuite Pro besplatno i otključajte 39+ razvojnih alata za svoj preglednik.
