Measure Distance ви позволява да кликнете върху всеки два елемента на уебстраница и незабавно да видите точното пикселно разстояние между тях — хоризонтално (X), вертикално (Y) и диагонално. Между елементите се появяват визуални свързващи линии с обозначени измервания, а информационната лента показва размерите на двата елемента и разстоянията в трите посоки.
Проверката на разстоянието между два елемента в DevTools на браузъра изисква отделно задържане на курсора върху всеки елемент, четене на стойностите за margin/padding и извършване на изчисления наум, за да разберете действителното визуално разстояние. Инструментът Measure Distance елиминира това напълно. Кликнете върху Елемент А, след това върху Елемент Б и точните пикселни разстояния се появяват веднага — X (хоризонтално), Y (вертикално) и по диагонал — показани като обозначени линии, свързващи двата елемента директно на страницата. Инструментът измерва от краищата на елементите (bounding boxes), така че стойностите представляват действителната визуална празнина между елементите, както я вижда потребителят. Това се различава от четенето на стойностите за margin/padding, които не отчитат кумулативния ефект от множеството свойства за разстояние. Всеки избран елемент се подчертава с цветна рамка и показва собствените си размери (ширина × височина), така че можете да видите както размерите на елементите, така че и разстоянието между тях в един изглед.
Кликнете върху първия елемент (подчертан със синя рамка), след това кликнете върху втория елемент (подчертан със зелена рамка). Разстоянията между техните ограничителни кутии (bounding boxes) се изчисляват и показват незабавно. Без влачене, без ръчно въвеждане — само две кликвания.
Вижте едновременно хоризонталното разстояние (X), вертикалното разстояние (Y) и диагоналното разстояние — всяко показано със собствена цветно кодирана измервателна линия и етикет. X в кехлибарено, Y в червено, диагонално в лилаво.
Прекъснати измервателни линии свързват двата избрани елемента директно на страницата, с етикети на разстоянието, разположени в средата на всяка линия. Визуалното представяне прави веднага ясно какво точно се измерва.
Всеки избран елемент показва собствените си размери ширина × височина в малък етикет. Това ви позволява да видите както размерите на елемента, така и разстоянието между тях в същия изглед — без да превключвате инструменти.
Кликнете върху нова двойка елементи, за да актуализирате незабавно измерванията. Няма нужда да деактивирате и активирате отново инструмента. Предишните измервателни линии се заменят с нови за новата двойка елементи.
Постоянна информационна лента (info bar) в долната част на изгледа показва компактно резюме: имената и размерите на двата елемента, плюс трите стойности на разстоянието (X, Y, диагонал). Удобно за копиране и поставяне в доклади за грешки (bug reports) или обратна връзка за дизайна.
Макетът казва, че бутонът трябва да бъде на 24px под заглавието. Кликнете върху заглавието, после върху бутона и потвърдете, че разстоянието по Y е точно 24px. Улавя фини несъответствия в разстоянията, които са невидими за окото, но са указани в спецификацията на дизайна.
Измерете разстоянието между Карта 1 и Карта 2, после между Карта 2 и Карта 3. Ако празнините не са идентични, открили сте несъответствие — вероятно причинено от различен margin или проблем с flexbox gap.
Измерете разстоянията между елементите при десктоп ширина, след което преоразмерете браузъра и измерете отново при мобилна ширина. Проверете дали разстоянията се мащабират правилно през контролните точки и дали адаптивните настройки на margin/padding работят според дизайна.
Включете прецизни измервания във вашите доклади за грешки: „Празнината между навигацията и главното изображение е 47px, а трябва да бъде 32px според спецификацията на дизайна.“ Стойностите от информационната лента могат да бъдат копирани директно в Jira тикети или GitHub issues.
Кликнете върху два елемента, които трябва да бъдат хоризонтално подравнени. Ако разстоянието по Y е 0px, те са идеално подравнени. Всяка стойност на Y, различна от нула, показва вертикално разминаване — точната цифра ви казва с колко пиксела е отклонението.
Отворете плаващия док DevSuite Pro и щракнете върху иконата Measure Distance. Курсорът се променя на мерник (crosshair), което показва, че можете да изберете първия елемент.
Кликнете върху произволен елемент на страницата. Той се подчертава със синя рамка и се обозначава като „Елемент А“ с неговите размери (ширина × височина в пиксели).
Кликнете върху втори елемент. Той се подчертава със зелена рамка и се обозначава като „Елемент Б“. Веднага се появяват измервателни линии, свързващи двата елемента.
Появяват се три измервателни линии: хоризонтална (X) в кехлибарено, вертикална (Y) в червено и диагонална в лилаво. Всяка линия има етикет, показващ разстоянието в пиксели. Информационната лента отдолу обобщава всички стойности.
Кликнете върху друга двойка елементи, за да измерите ново разстояние незабавно. Щракнете върху иконата Measure Distance в дока, за да деактивирате инструмента, когато приключите.
Инсталирайте DevSuite Pro безплатно и отключете 39+ инструмента за разработчици за вашия браузър.
