Pinahihintulutan ka ng Measure Distance na mag-click sa dalawang element sa isang webpage at agad na makita ang eksaktong distansya ng pixel sa pagitan nila — pahalang (X), patayo (Y), at diagonal. Mga visual na linya ng koneksyon na may mga may-label na sukat ang lilitaw sa pagitan ng mga element, at ang isang info bar ay nagpapakita ng mga sukat ng parehong element at ng mga distansya sa tatlong direksyon.
Ang pag-check ng spacing sa pagitan ng dalawang element sa browser DevTools ay nangangailangan ng pag-hover sa bawat element nang hiwalay, pagbabasa ng mga halaga ng margin/padding, at mental na kalkulasyon para makuha ang aktwal na visual na distansya. Ganap na inalis ng Measure Distance ang prosesong ito. I-click ang Element A, i-click ang Element B, at agad na lilitaw ang eksaktong distansya ng pixel — X (pahalang), Y (patayo), at diagonal — ipinapakita bilang mga may-label na linya na nagkokonekta sa dalawang element nang direkta sa page. Sinusukat ng tool mula sa mga gilid ng element (bounding boxes), kaya ang mga halaga ay kumakatawan sa aktwal na visual na agwat sa pagitan ng mga element tulad ng nakikita ng user. Ito ay naiiba mula sa pagbabasa ng mga halaga ng margin/padding, na hindi isinasaalang-alang ang kumulatibong epekto ng maraming katangian ng spacing. Ang bawat napiling element ay na-highlight na may may kulay na border at nagpapakita ng sarili nitong mga sukat (lapad × taas), kaya makikita mo ang parehong laki ng element at ang spacing sa pagitan nila sa isang view.
I-click ang unang element (na-highlight na may blue na border), pagkatapos i-click ang pangalawang element (na-highlight na may green na border). Agad na kinakalkula at ipinapakita ang mga distansya sa pagitan ng kanilang mga bounding box. Walang pag-drag, walang manu-manong input — dalawang pag-click lang.
Tingnan ang pahalang na distansya (X), patayong distansya (Y), at diagonal na distansya nang sabay-sabay — ang bawat isa ay ipinapakita na may sariling color-coded na linya ng pagsukat at label. X sa amber, Y sa pula, diagonal sa lila.
Ang mga naka-dash na linya ng pagsukat ay nagkokonekta sa dalawang napiling element nang direkta sa page, na may mga label ng distansya na nakaposisyon sa midpoint ng bawat linya. Agad na malinaw ng visual na representasyon kung ano ang sinusukat.
Ang bawat napiling element ay nagpapakita ng sariling mga sukat ng lapad × taas sa isang maliit na label. Nagpapahintulot ito sa iyo na makita ang parehong laki ng element at ang spacing sa pagitan nila sa parehong view — nang hindi nagpapalit ng tool.
I-click ang bagong pares ng mga element para agad na ma-update ang mga pagsukat. Hindi na kailangang i-deactivate at muling i-activate ang tool. Ang mga nakaraang linya ng pagsukat ay papalitan ng mga bago para sa bagong pares ng element.
Ang isang persistent na info bar sa ibaba ng viewport ay nagpapakita ng maigting na buod: mga pangalan at sukat ng parehong element, kasama ang lahat ng tatlong halaga ng distansya (X, Y, diagonal). Madaling kopyahin para i-paste sa mga bug report o design feedback.
Sinasabi ng mockup na ang button ay dapat na 24px sa ibaba ng heading. I-click ang heading, i-click ang button, at kumpirmahin na ang distansyang Y ay eksaktong 24px. Mahuhuli ang mga banayad na pagkakaiba-iba ng spacing na hindi makikita ng mata ngunit tinukoy sa mga design token.
Sukatin ang distansya sa pagitan ng Card 1 at Card 2, pagkatapos sa pagitan ng Card 2 at Card 3. Kung hindi magkaparehong ang mga agwat, nakahanap ka ng hindi pagkakatugma — malamang na dulot ng magkaibang mga margin o isang flexbox gap na isyu.
Sukatin ang mga distansya ng element sa lapad ng desktop, pagkatapos baguhin ang laki ng browser at sukatin muli sa lapad ng mobile. I-verify na tama ang pag-scale ng spacing sa mga breakpoint at gumagana nang ayon sa disenyo ang mga responsive na pagsasaayos ng margin/padding.
Isama ang mga tumpak na pagsukat sa iyong mga bug report: "Ang agwat sa pagitan ng nav at hero ay 47px, dapat 32px ayon sa design spec." Ang mga halaga ng info bar ay maaaring direktang kopyahin sa mga Jira ticket o GitHub issue.
I-click ang dalawang element na dapat ay pahalang na nakahanay. Kung ang distansyang Y ay 0px, perpektong nakahanay ang mga ito. Ang anumang hindi-zero na halaga ng Y ay nagpapahiwatig ng patayong maling pagkakahanay — ang eksaktong numero ay nagsasabi sa iyo kung ilang pixel ang kaibahan.
Buksan ang floating dock ng DevSuite Pro at i-click ang icon ng Measure Distance. Nagbabago ang cursor sa isang crosshair, na nagpapahiwatig na maaari ka nang pumili ng unang element.
I-click ang anumang element sa page. Ito ay na-highlight na may blue na border at may label na "Element A" kasama ang mga sukat nito (lapad × taas sa pixels).
I-click ang pangalawang element. Ito ay na-highlight na may green na border at may label na "Element B." Agad na lilitaw ang mga linya ng pagsukat na nagkokonekta sa dalawang element.
Tatlong linya ng pagsukat ang lilitaw: pahalang (X) sa amber, patayo (Y) sa pula, at diagonal sa lila. Ang bawat linya ay may label na nagpapakita ng distansya sa pixel. Ang info bar sa ibaba ay nagbubuod ng lahat ng halaga.
I-click ang isa pang pares ng mga element para agad na sukatin ang bagong distansya. I-click ang icon ng Measure Distance sa dock para i-deactivate ang tool kung tapos na.
I-install ang DevSuite Pro nang libre at i-unlock ang 39+ developer tools para sa iyong browser.
