สองคลิกแทนการคำนวณใน DevTools
คลิก 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 ทันที. 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 โดยตรง บนหน้า, with distance labels positioned at each line's midpoint. The visual representation makes it immediately clear what's being measured.
แต่ละ 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 — โดยไม่ต้อง switching tools.
Click a new pair of elements to ทันที 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. คลิก 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 โดยตรง 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 mใดก็ได้ pixels off it is.
เปิด DevSuite Pro dock ลอย and click the Measure Distance icon. The cursor changes to a crosshair, indicating you can select the first element.
คลิกองค์ประกอบใดก็ได้ บนหน้า. 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. แต่ละ 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 ทันที. คลิก Measure Distance icon in the dock to deactivate the tool when done.
ติดตั้ง DevSuite Pro ฟรีและปลดล็อกเครื่องมือสำหรับนักพัฒนามากกว่า 39 รายการสำหรับเบราว์เซอร์ของคุณ
