Mittaa etäisyys -työkalu antaa sinun napsauttaa mitä tahansa kahta elementtiä verkkosivulla ja nähdä välittömästi niiden tarkka pikselietäisyys — vaakasuunnassa (X), pystysuunnassa (Y) ja diagonaalisesti. Elementtien välille ilmestyy visuaaliset yhdistysviivat mitoitusmerkintöineen, ja infopalkki näyttää molempien elementtien mitat sekä etäisyydet kaikissa kolmessa suunnassa.
Kahden elementin välisen välistyksen tarkistaminen selaimen DevTools-työkalussa edellyttää kummankin elementin erikseen leijuttamista, margin/padding-arvojen lukemista ja päässälaskua todellisen visuaalisen etäisyyden selvittämiseksi. Mittaa etäisyys poistaa tämän vaivan kokonaan. Napsauta elementtiä A, napsauta elementtiä B, ja tarkat pikselietäisyydet ilmestyvät välittömästi — X (vaaka), Y (pysty) ja diagonaali — merkittyinä viivoina, jotka yhdistävät elementit suoraan sivulla. Työkalu mittaa elementtien reunoista (bounding box), joten arvot kuvaavat todellista visuaalista rakoa elementtien välillä sellaisena kuin käyttäjä ne näkee. Tämä poikkeaa margin/padding-arvojen lukemisesta, sillä ne eivät ota huomioon useiden välistysominaisuuksien kumulatiivista vaikutusta. Kukin valittu elementti korostetaan värillisellä reunuksella ja näyttää omat mittansa (leveys × korkeus), joten elementtien koot ja niiden välinen välistys näkyvät samassa näkymässä.
Napsauta ensimmäistä elementtiä (korostettu sinisellä reunuksella) ja sitten toista elementtiä (korostettu vihreällä reunuksella). Elementtien bounding box -välinen etäisyys lasketaan ja näytetään välittömästi. Ei vetämistä, ei manuaalista syöttöä — pelkät kaksi napsautusta.
Näet vaakaetäisyyden (X), pystyetäisyyden (Y) ja diagonaalietäisyyden yhtäaikaisesti — kukin näytetään omalla värillään koodatulla mittausviivallaan ja merkinnällään. X on keltaruskealla, Y punaisella ja diagonaali violetilla.
Katkoviivaiset mittausviivat yhdistävät kaksi valittua elementtiä suoraan sivulla, ja etäisyysmerkinnät on sijoitettu kunkin viivan keskikohtaan. Visuaalinen esitys tekee välittömästi selväksi, mitä mitataan.
Kukin valittu elementti näyttää oman leveys × korkeus -mittansa pienessä merkinnässä. Tämä antaa sinun nähdä sekä elementtien koot että niiden välisen välistyksen samassa näkymässä — ilman työkalunvaihtoa.
Napsauta uutta elementtiparia päivittääksesi mitat välittömästi. Työkalua ei tarvitse poistaa käytöstä ja aktivoida uudelleen. Edelliset mittausviivat korvataan uusilla uuden elementtiparin osalta.
Pysyvä infopalkki näkymän alareunassa näyttää tiiviin yhteenvedon: molempien elementtien nimet ja mitat sekä kaikki kolme etäisyysarvoa (X, Y, diagonaali). Helposti kopioitavissa virheraportteihin tai suunnittelupalautteeseen.
Luonnos kertoo, että painikkeen pitäisi olla 24 pikseliä otsikon alapuolella. Napsauta otsikkoa, napsauta painiketta ja varmista, että Y-etäisyys on täsmälleen 24 pikseliä. Paljastaa hienovaraiset välistyspoikkeamat, jotka ovat silmälle näkymättömiä mutta jotka on määritelty design-tokeneissa.
Mittaa etäisyys kortin 1 ja kortin 2 välillä, sitten kortin 2 ja kortin 3 välillä. Jos välit eivät ole identtiset, olet löytänyt epäjohdonmukaisuuden — todennäköisesti erilaisista margineista tai flexbox-gap-ongelmasta johtuen.
Mittaa elementtien etäisyydet työpöytäleveydellä, muuta sitten selaimen kokoa ja mittaa uudelleen mobiilileveydellä. Varmista, että välistys skaalautuu oikein eri katkeamispisteissä ja että responsiiviset margin/padding-säädöt toimivat suunnitellusti.
Sisällytä virheraportteihin täsmälliset mitat: "Navigaation ja hero-osion välinen rako on 47 pikseliä, vaikka suunnittelumääritysten mukaan sen pitäisi olla 32 pikseliä." Infopalkin arvot voi kopioida suoraan Jira-tiketteihin tai GitHub-issueisiin.
Napsauta kahta elementtiä, joiden pitäisi olla vaakasuunnassa kohdistettuja. Jos Y-etäisyys on 0 pikseliä, ne ovat täydellisesti kohdistettuja. Mikä tahansa nollasta poikkeava Y-arvo ilmaisee pystysuuntaisen kohdistusvirheen — tarkka luku kertoo, kuinka monta pikseliä se on vinossa.
Avaa DevSuite Pro -kelluva telakka ja napsauta Mittaa etäisyys -kuvaketta. Kohdistin muuttuu hiusristikoksi, mikä ilmaisee, että voit valita ensimmäisen elementin.
Napsauta mitä tahansa elementtiä sivulla. Se korostetaan sinisellä reunuksella ja sille lisätään merkintä "Element A" sen mittojen kera (leveys × korkeus pikseleinä).
Napsauta toista elementtiä. Se korostetaan vihreällä reunuksella ja merkitään "Element B." Mittausviivat ilmestyvät välittömästi yhdistäen kaksi elementtiä.
Näkyviin tulee kolme mittausviivaa: vaaka (X) keltaruskealla, pysty (Y) punaisella ja diagonaali violetilla. Jokaisessa viivassa on merkintä pikselietäisyydestä. Alareunassa oleva infopalkki kokoaa kaikki arvot yhteen.
Napsauta toista elementtiparia mitattaksesi uuden etäisyyden välittömästi. Napsauta telakassa olevaa Mittaa etäisyys -kuvaketta poistaaksesi työkalu käytöstä, kun olet valmis.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.
