Đo khoảng cách cho phép bạn nhấp vào hai phần tử và thấy ngay khoảng cách chính xác giữa chúng.
Đo khoảng cách cho phép bạn nhấp vào hai phần tử và thấy ngay khoảng cách chính xác giữa chúng.
Click the first element (highlighted with a blue border), then click the second element (highlighted with a green border). The distances between their bounding boxes are calculated and displayed instantly. No dragging, no manual input — just two clicks.
See the horizontal distance (X), vertical distance (Y), and diagonal distance simultaneously — each displayed with its own color-coded measurement line and label. X in amber, Y in red, diagonal in purple.
Dashed measurement lines connect the two selected elements directly on the page, with distance labels positioned at each line's midpoint. The visual representation makes it immediately clear what's being measured.
Each selected element shows its own width × height dimensions in a small label. This lets you see both the element sizes and the spacing between them in the same view — without switching tools.
Click a new pair of elements to instantly update the measurements. No need to deactivate and reactivate the tool. The previous measurement lines are replaced with new ones for the new element pair.
A persistent info bar at the bottom of the viewport shows a compact summary: both elements' names and dimensions, plus all three distance values (X, Y, diagonal). Copy-friendly for pasting into bug reports or design feedback.
The mockup says the button should be 24px below the heading. Click the heading, click the button, and confirm the Y distance is exactly 24px. Catches subtle spacing discrepancies that are invisible to the eye but specified in design tokens.
Measure the distance between Card 1 and Card 2, then between Card 2 and Card 3. If the gaps aren't identical, you've found an inconsistency — likely caused by differing margins or a flexbox gap issue.
Measure element distances at desktop width, then resize the browser and measure again at mobile width. Verify that spacing scales correctly across breakpoints and that responsive margin/padding adjustments are working as designed.
Include precise measurements in your bug reports: "The gap between the nav and hero is 47px, should be 32px per the design spec." The info bar values can be copied directly into Jira tickets or GitHub issues.
Click two elements that should be horizontally aligned. If the Y distance is 0px, they're perfectly aligned. Any non-zero Y value indicates a vertical misalignment — the exact number tells you how many pixels off it is.
Open the DevSuite Pro floating dock and click the Measure Distance icon. The cursor changes to a crosshair, indicating you can select the first element.
Click any element on the page. It's highlighted with a blue border and labeled "Element A" with its dimensions (width × height in pixels).
Click a second element. It's highlighted with a green border and labeled "Element B." Measurement lines immediately appear connecting the two elements.
Three measurement lines appear: horizontal (X) in amber, vertical (Y) in red, and diagonal in purple. Each line has a label showing the pixel distance. The info bar at the bottom summarizes all values.
Click another pair of elements to measure a new distance instantly. Click the Measure Distance icon in the dock to deactivate the tool when done.
Cài đặt DevSuite Pro miễn phí và mở khóa hơn 39 công cụ dành cho nhà phát triển cho trình duyệt của bạn.
