A Távolságmérés eszközzel bármely két elemre kattintva azonnal láthatja a köztük lévő pontos pixeltávolságot — vízszintesen (X), függőlegesen (Y) és átlósan. Az elemek között címkézett méréseket tartalmazó vizuális összekötő vonalak jelennek meg, egy információs sáv pedig mindkét elem méreteit és mindhárom irányú távolságot mutatja.
Két elem közötti távolság ellenőrzése a böngésző DevTools-ában megköveteli, hogy külön-külön az elemek fölé vigye az egeret, leolvassa a margin/padding értékeket, majd fejszámolással kiszámítsa a tényleges vizuális távolságot. A Távolságmérés ezt teljesen kiiktatja. Kattintson az A elemre, kattintson a B elemre, és a pontos pixeltávolságok azonnal megjelennek — X (vízszintes), Y (függőleges) és átlós —, közvetlenül az oldalon, a két elemet összekötő címkézett vonalakkal megjelenítve. Az eszköz az elemek éleitől (határoló dobozaitól) mér, így az értékek a felhasználó által ténylegesen látott vizuális rést jelenítik meg. Ez eltér a margin/padding értékek leolvasásától, amelyek nem veszik figyelembe több térközbeállítás kumulatív hatását. Minden kiválasztott elem színes kerettel van kiemelve, és megjeleníti saját méreteit (szélesség × magasság), így egyetlen nézetben láthatja mind az elemek méretét, mind a köztük lévő távolságot.
Kattintson az első elemre (kék kerettel kiemelve), majd a másodikra (zöld kerettel kiemelve). A határoló dobozaik közötti távolságok azonnal kiszámításra és megjelenítésre kerülnek. Nincs húzás, nincs kézi bevitel — csak két kattintás.
Egyszerre lássa a vízszintes (X), függőleges (Y) és átlós távolságot — mindegyiket saját színkódolt mérővonallal és címkével. X borostyánsárga, Y piros, az átlós lila színben.
Szaggatott mérővonalak kötik össze a két kiválasztott elemet közvetlenül az oldalon, a távolságcímkék pedig az egyes vonalak középpontján helyezkednek el. A vizuális megjelenítés azonnal egyértelművé teszi, mit is mérünk.
Minden kiválasztott elem egy kis címkében mutatja saját szélesség × magasság méreteit. Így ugyanabban a nézetben láthatja mind az elemek méretét, mind a köztük lévő térközt — eszközváltás nélkül.
Kattintson egy új elempárra a mérések azonnali frissítéséhez. Nem szükséges kikapcsolni és újra bekapcsolni az eszközt. Az előző mérővonalak automatikusan az új elempárhoz tartozó új vonalakra cserélődnek.
A nézetablak alján egy állandó információs sáv tömör összefoglalót mutat: mindkét elem nevét és méreteit, valamint mindhárom távolságértéket (X, Y, átlós). Másolásra alkalmas formátum hibajelentésekbe vagy dizájn-visszajelzésekbe illesztéshez.
A makett szerint a gombnak 24px-re kell lennie a címsor alatt. Kattintson a címsorra, majd a gombra, és ellenőrizze, hogy az Y távolság pontosan 24px-e. Így felfedezhet finom térközeltéréseket, amelyek szemmel láthatatlanok, de a dizájntokenekben meg vannak határozva.
Mérje meg a távolságot az 1. és 2. kártya, majd a 2. és 3. kártya között. Ha a rések nem azonosak, inkonzisztenciát talált — valószínűleg eltérő margók vagy flexbox gap probléma okozza.
Mérje meg az elemtávolságokat asztali szélességben, majd méretezze át a böngészőt, és mérje meg újra mobilszélességben. Ellenőrizze, hogy a térközök helyesen skálázódnak-e a töréspontok között, és hogy a reszponzív margin/padding beállítások a tervezettek szerint működnek-e.
Foglaljon pontos méréseket a hibajelentéseibe: "A navigáció és a hero közötti rés 47px, a dizájnspecifikáció szerint 32px-nek kellene lennie." Az információs sáv értékei közvetlenül átmásolhatók a Jira-jegyekbe vagy GitHub-issue-kba.
Kattintson két olyan elemre, amelyeknek vízszintesen igazodniuk kellene. Ha az Y távolság 0px, tökéletesen igazodnak. Bármilyen nem nulla Y érték függőleges eltérésre utal — a pontos szám megmutatja, hány pixellel tér el.
Nyissa meg a DevSuite Pro lebegő dokkját, és kattintson a Távolságmérés ikonra. A kurzor célkeresztté változik, jelezve, hogy kiválaszthatja az első elemet.
Kattintson az oldal bármely elemére. Kék kerettel emeli ki, és "A elem" címkével jelöli meg méreteivel együtt (szélesség × magasság pixelben).
Kattintson egy második elemre. Zöld kerettel emeli ki, és "B elem" címkével jelöli meg. Azonnal megjelennek a két elemet összekötő mérővonalak.
Három mérővonal jelenik meg: vízszintes (X) borostyánsárga, függőleges (Y) piros, átlós lila színben. Minden vonalon egy címke mutatja a pixeltávolságot. Az alsó információs sáv összefoglalja az összes értéket.
Kattintson egy újabb elempárra az új távolság azonnali méréséhez. Kattintson a Távolságmérés ikonra a dokkban, hogy kikapcsolja az eszközt, ha végzett.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 64+ fejlesztői eszközt böngészőjéhez.
