Zmierz odległość pozwala kliknąć dowolne dwa elementy na stronie i natychmiast zobaczyć dokładną odległość w pikselach między nimi — poziomo (X), pionowo (Y) i po przekątnej. Wizualne linie łączące z oznakowanymi pomiarami pojawiają się między elementami, a pasek informacyjny pokazuje wymiary obu elementów i odległości we wszystkich trzech kierunkach.
Sprawdzanie odstępów między dwoma elementami w DevTools przeglądarki wymaga najeżdżania na każdy element osobno, odczytywania wartości marginesu/paddingu i wykonywania mentalnej matematyki w celu obliczenia rzeczywistej odległości wizualnej. Zmierz odległość eliminuje to całkowicie. Kliknij element A, kliknij element B, a dokładne odległości w pikselach pojawiają się natychmiast — X (poziomo), Y (pionowo) i po przekątnej — wyświetlane jako oznakowane linie łączące dwa elementy bezpośrednio na stronie. Narzędzie mierzy od krawędzi elementów (ramek ograniczających), więc wartości reprezentują rzeczywistą wizualną przerwę między elementami, tak jak widzi ją użytkownik. Różni się to od odczytywania wartości margin/padding, które nie uwzględniają kumulatywnego efektu wielu właściwości odstępów. Każdy wybrany element jest podświetlony kolorową ramką i pokazuje własne wymiary (szerokość × wysokość), więc możesz zobaczyć zarówno rozmiary elementów, jak i odstępy między nimi w jednym widoku.
Kliknij pierwszy element (podświetlony niebieską ramką), a następnie kliknij drugi element (podświetlony zieloną ramką). Odległości między ich ramkami ograniczającymi są obliczane i wyświetlane natychmiast. Bez przeciągania, bez ręcznego wprowadzania — tylko dwa kliknięcia.
Zobacz odległość poziomą (X), odległość pionową (Y) i odległość przekątną jednocześnie — każda wyświetlana z własną kolorowo kodowaną linią pomiarową i etykietą. X w kolorze bursztynowym, Y w czerwonym, przekątna w fioletowym.
Kropkowane linie pomiarowe łączą dwa wybrane elementy bezpośrednio na stronie, z etykietami odległości umieszczonymi w punkcie środkowym każdej linii. Reprezentacja wizualna sprawia, że natychmiast wiadomo, co jest mierzone.
Każdy wybrany element pokazuje własne wymiary szerokość × wysokość w małej etykiecie. Pozwala to zobaczyć zarówno rozmiary elementów, jak i odstępy między nimi w tym samym widoku — bez przełączania narzędzi.
Kliknij nową parę elementów, aby natychmiast zaktualizować pomiary. Nie ma potrzeby dezaktywacji i ponownej aktywacji narzędzia. Poprzednie linie pomiarowe są zastępowane nowymi dla nowej pary elementów.
Utrzymujący się pasek informacyjny na dole viewportu pokazuje kompaktowe podsumowanie: nazwy i wymiary obu elementów oraz wszystkie trzy wartości odległości (X, Y, przekątna). Łatwe do kopiowania do raportów o błędach lub opinii projektowej.
Makieta mówi, że przycisk powinien być 24px poniżej nagłówka. Kliknij nagłówek, kliknij przycisk i potwierdź, że odległość Y wynosi dokładnie 24px. Wychwytuje subtelne rozbieżności odstępów, które są niewidoczne dla oka, ale określone w tokenach projektowych.
Zmierz odległość między Kartą 1 i Kartą 2, a następnie między Kartą 2 i Kartą 3. Jeśli przerwy nie są identyczne, znalazłeś niespójność — prawdopodobnie spowodowaną różnymi marginesami lub problemem gap w flexboxie.
Zmierz odległości elementów przy szerokości desktopowej, a następnie zmień rozmiar przeglądarki i zmierz ponownie przy szerokości mobilnej. Zweryfikuj, że odstępy poprawnie skalują się między punktami przerwania i że responsywne dostosowania margin/padding działają zgodnie z projektem.
Zawieraj precyzyjne pomiary w swoich raportach o błędach: "Przerwa między nav i hero wynosi 47px, powinna być 32px zgodnie ze specyfikacją projektu." Wartości paska informacyjnego mogą być bezpośrednio kopiowane do biletów Jira lub zgłoszeń GitHub.
Kliknij dwa elementy, które powinny być wyrównane poziomo. Jeśli odległość Y wynosi 0px, są idealnie wyrównane. Jakakolwiek niezerowa wartość Y wskazuje na pionowe niedopasowanie — dokładna liczba mówi ci, o ile pikseli jest nie tak.
Otwórz pływający dok DevSuite Pro i kliknij ikonę Zmierz odległość. Kursor zmienia się w celownik, wskazując, że możesz wybrać pierwszy element.
Kliknij dowolny element na stronie. Zostanie podświetlony niebieską ramką i oznaczony "Element A" z jego wymiarami (szerokość × wysokość w pikselach).
Kliknij drugi element. Zostanie podświetlony zieloną ramką i oznaczony "Element B." Linie pomiarowe natychmiast pojawiają się, łącząc oba elementy.
Pojawiają się trzy linie pomiarowe: pozioma (X) w kolorze bursztynowym, pionowa (Y) w czerwonym i przekątna w fioletowym. Każda linia ma etykietę pokazującą odległość w pikselach. Pasek informacyjny na dole podsumowuje wszystkie wartości.
Kliknij inną parę elementów, aby natychmiast zmierzyć nową odległość. Kliknij ikonę Zmierz odległość w doku, aby dezaktywować narzędzie po zakończeniu.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 39 narzędzi programistycznych dla swojej przeglądarki.
