Measure Distance позволяет нажать на любые два элемента на веб-странице и мгновенно увидеть точное расстояние между ними — по горизонтали (X), по вертикали (Y) и по диагонали. Между элементами появляются визуальные линии соединения с подписанными измерениями, а информационная панель показывает размеры обоих элементов и расстояния во всех трёх направлениях.
Проверка расстояния между двумя элементами в браузерном DevTools требует наведения на каждый элемент по отдельности, считывания значений margin/padding и ручного подсчёта фактического визуального расстояния. Measure Distance полностью устраняет эту необходимость. Нажмите на элемент A, нажмите на элемент B — и точные расстояния в пикселях появятся мгновенно: X (горизонталь), Y (вертикаль) и диагональ — отображаются в виде подписанных линий, соединяющих два элемента прямо на странице. Инструмент измеряет от краёв элементов (bounding box), поэтому значения отражают фактический видимый зазор между элементами, как его видит пользователь. Это отличается от считывания значений margin/padding, которые не учитывают кумулятивный эффект нескольких свойств отступов. Каждый выбранный элемент выделяется цветной рамкой и показывает собственные размеры (ширина × высота), так что в одном виде видны и размеры элементов, и расстояние между ними.
Нажмите на первый элемент (выделен синей рамкой), затем на второй (выделен зелёной рамкой). Расстояния между их bounding box вычисляются и отображаются мгновенно. Никакого перетаскивания, никакого ввода вручную — только два клика.
Видите горизонтальное расстояние (X), вертикальное расстояние (Y) и диагональное расстояние одновременно — каждое отображается своей цветной линией измерения с подписью. X — янтарным, Y — красным, диагональ — фиолетовым.
Пунктирные линии измерения соединяют два выбранных элемента прямо на странице, а подписи расстояний расположены в середине каждой линии. Визуальное представление сразу даёт понять, что именно измеряется.
Каждый выбранный элемент показывает собственные размеры ширина × высота в небольшой подписи. Это позволяет видеть и размеры элементов, и расстояние между ними в одном виде — без переключения инструментов.
Нажмите на новую пару элементов, чтобы мгновенно обновить измерения. Не нужно деактивировать и повторно активировать инструмент. Предыдущие линии измерения заменяются новыми для новой пары элементов.
Постоянная информационная панель в нижней части viewport показывает компактную сводку: названия и размеры обоих элементов, а также все три значения расстояний (X, Y, диагональ). Удобна для копирования и вставки в отчёты об ошибках или дизайн-фидбек.
В макете указано, что кнопка должна быть на 24px ниже заголовка. Нажмите на заголовок, нажмите на кнопку и убедитесь, что расстояние Y равно ровно 24px. Выявляет тонкие несоответствия в отступах, которые не видны на глаз, но заданы в дизайн-токенах.
Измерьте расстояние между карточкой 1 и карточкой 2, затем между карточкой 2 и карточкой 3. Если зазоры не совпадают — найдено несоответствие, скорее всего вызванное разными значениями margin или проблемой с flexbox gap.
Измерьте расстояния между элементами при ширине десктопа, затем измените размер браузера и измерьте снова при ширине мобильного устройства. Убедитесь, что отступы корректно масштабируются по точкам перелома и что адаптивные корректировки margin/padding работают как задумано.
Включайте точные измерения в отчёты об ошибках: «Зазор между навигацией и hero составляет 47px, должно быть 32px согласно спецификации дизайна.» Значения из информационной панели можно скопировать напрямую в тикеты Jira или задачи GitHub.
Нажмите на два элемента, которые должны быть выровнены по горизонтали. Если расстояние Y равно 0px — они выровнены идеально. Любое ненулевое значение Y указывает на вертикальное смещение — точное число показывает, на сколько пикселей.
Откройте плавающую панель DevSuite Pro и нажмите на иконку Measure Distance. Курсор меняется на перекрестие, сигнализируя о готовности к выбору первого элемента.
Нажмите на любой элемент на странице. Он выделяется синей рамкой с подписью «Element A» и его размерами (ширина × высота в пикселях).
Нажмите на второй элемент. Он выделяется зелёной рамкой с подписью «Element B». Линии измерения мгновенно появляются, соединяя два элемента.
Появляются три линии измерения: горизонтальная (X) — янтарным, вертикальная (Y) — красным и диагональная — фиолетовым. На каждой линии есть подпись с расстоянием в пикселях. Информационная панель внизу суммирует все значения.
Нажмите на другую пару элементов, чтобы мгновенно измерить новое расстояние. Нажмите иконку Measure Distance на панели, чтобы деактивировать инструмент по завершении работы.
Установите DevSuite Pro бесплатно и разблокируйте более 39 инструментов разработчика для вашего браузера.
