测量距离工具让你点击网页上的任意两个元素，即时查看它们之间的精确像素距离——包括水平方向 (X)、垂直方向 (Y) 和对角线方向。元素之间会显示带有标注的视觉连接线，底部信息栏还会显示两个元素的尺寸以及三个方向的距离数值。
在浏览器 DevTools 中检查两个元素之间的间距，需要分别悬停每个元素、读取 margin/padding 值，再手动计算实际视觉距离。测量距离工具彻底消除了这一繁琐过程。点击元素 A，再点击元素 B，精确的像素距离立即呈现——X（水平）、Y（垂直）和对角线——以带标注的连接线直接显示在页面上。该工具从元素边缘（bounding box）进行测量，所呈现的数值即用户实际看到的视觉间隙。这与读取 margin/padding 值不同，后者无法反映多个间距属性叠加后的实际效果。每个选中的元素会以彩色边框高亮显示，并标注自身的尺寸（宽度 × 高度），让你在同一视图中同时看到元素大小和元素间距。
点击第一个元素（以蓝色边框高亮），再点击第二个元素（以绿色边框高亮）。两个 bounding box 之间的距离会被立即计算并显示。无需拖拽，无需手动输入——两次点击即可。
同时查看水平距离 (X)、垂直距离 (Y) 和对角线距离——每个方向都有独立的色标测量线和标注。X 为琥珀色，Y 为红色，对角线为紫色。
虚线测量线直接在页面上连接两个选中的元素，距离标注位于每条线的中点。直观的视觉呈现让测量内容一目了然。
每个选中的元素都会在小标签中显示自身的宽度 × 高度尺寸。无需切换工具，即可在同一视图中同时看到元素大小和元素间距。
点击新的元素对，即可立即更新测量结果。无需停用再重新激活工具，新的测量线会自动替换上一次的结果。
视口底部的持久信息栏显示紧凑摘要：两个元素的名称和尺寸，以及三个方向的距离数值（X、Y、对角线）。便于复制粘贴到缺陷报告或设计反馈中。
设计稿要求按钮位于标题下方 24px 处。点击标题，再点击按钮，确认 Y 距离精确为 24px。可捕捉肉眼不可见但已在设计 token 中明确规定的细微间距偏差。
分别测量卡片 1 与卡片 2、卡片 2 与卡片 3 之间的距离。若间距不一致，则说明存在问题——通常由不同的 margin 或 flexbox gap 设置引起。
在桌面端宽度测量元素距离，然后调整浏览器尺寸，在移动端宽度再次测量。验证间距是否在各断点之间正确缩放，以及响应式 margin/padding 调整是否按设计意图生效。
在缺陷报告中附上精确测量数值，例如：导航栏与 hero 区域之间的间距为 47px，设计规范要求为 32px。信息栏中的数值可直接复制到 Jira 工单或 GitHub issue 中。
点击两个应水平对齐的元素。若 Y 距离为 0px，则两者完美对齐。任何非零的 Y 值均表示存在垂直偏移——该数值即告诉你偏移了多少 px。
打开 DevSuite Pro 浮动工具栏，点击测量距离图标。光标变为十字准线，表示可以选择第一个元素。
点击页面上的任意元素。该元素以蓝色边框高亮，并标注 Element A 及其尺寸（宽度 × 高度，单位 px）。
点击第二个元素。该元素以绿色边框高亮，并标注 Element B。测量线立即出现并连接两个元素。
三条测量线随即出现：水平方向 (X) 为琥珀色，垂直方向 (Y) 为红色，对角线方向为紫色。每条线都有标注显示像素距离。底部信息栏汇总所有数值。
点击另一对元素可立即测量新距离。完成后点击工具栏中的测量距离图标即可停用工具。
