Mõõda Kaugust laseb sul klõpsata mis tahes kahel elemendil veebilehel ja kohe näha täpset pikslite kaugust nende vahel — horisontaalselt (X), vertikaalselt (Y) ja diagonaalselt. Visuaalsed ühendusvõimed koos märgistatud mõõtmistega ilmuvad elementide vahele ning inforiba näitab mõlema elemendi mõõtmeid ja kaugusi kõigis kolmes suunas.
Kahe elemendi vahekauguse kontrollimine brauseri DevToolsis nõuab iga elemendi eraldi üle hõljutamist, veeris/täidis väärtuste lugemist ja vaimset matemaatikat tegeliku visuaalse kauguse arvutamiseks. Mõõda Kaugust kõrvaldab selle täielikult. Klõpsa Elemendil A, klõpsa Elemendil B ja täpsed pikslite kaugused ilmuvad kohe — X (horisontaalne), Y (vertikaalne) ja diagonaalne — kuvatakse märgistatud joontena, mis ühendavad kahte elementi otse lehel. Tööriist mõõdab elementide servadest (piirikastidest), nii et väärtused esindavad tegelikku visuaalset lünka elementide vahel, nagu kasutaja neid näeb. See erineb veeris/täidis väärtuste lugemisest, mis ei arvesta mitme vahe omaduse kumulatiivset mõju. Iga valitud element on esile tõstetud värvilise ääriste ja näitab oma mõõtmeid (laius × kõrgus), nii et saad näha nii elementide suurusi kui ka nende vahekaugust ühes vaates.
Klõpsa esimest elementi (esile tõstetud sinise äärised), seejärel klõpsa teist elementi (esile tõstetud rohelise äärised). Nende piirikastide vahelised kaugused arvutatakse ja kuvatakse kohe. Lohistamata, käsitsi sisestuseta — ainult kaks klõpsu.
Vaata horisontaalset kaugust (X), vertikaalset kaugust (Y) ja diagonaalset kaugust samaaegselt — igaüks kuvatakse oma värvikoodiga mõõtejoonega ja sildiga. X merevaiguvärvis, Y punases, diagonaal lillas.
Kriipsjooned ühendavad kahte valitud elementi otse lehel, kauguse sildid on paigutatud iga joone keskkohale. Visuaalne esitus teeb kohe selgeks, mida mõõdetakse.
Iga valitud element näitab oma laius × kõrgus mõõtmeid väikeses sildis. See laseb sul näha nii elementide suurusi kui ka nende vahekaugust samas vaates — ilma tööriistu vahetamata.
Klõpsa uut elementide paari, et kohe mõõtmisi uuendada. Pole vaja tööriista deaktiveerida ja uuesti aktiveerida. Eelmised mõõtejooned asendatakse uutega uue elementide paari jaoks.
Püsiv inforiba vaateava allosas näitab kompaktset kokkuvõtet: mõlema elemendi nimed ja mõõtmed, pluss kõik kolm kauguse väärtust (X, Y, diagonaalne). Kopeersõbralik veaparanduse aruannetesse või disainifeedbacki kleepimiseks.
Makett ütleb, et nupp peaks olema 24px allpool pealkirja. Klõpsa pealkirja, klõpsa nuppu ja kinnita, et Y kaugus on täpselt 24px. Tuvastab peened vahekauguse lahknevused, mis on silmale nähtamatud, kuid on määratud disaini tokenites.
Mõõda kaugust Kaardi 1 ja Kaardi 2 vahel, seejärel Kaardi 2 ja Kaardi 3 vahel. Kui lüngad pole identsed, oled leidnud ebajärjepidevuse — tõenäoliselt erinevate veeriste või flexbox lünkade probleemi tõttu.
Mõõda elementide kaugusi lauaarvuti laiusel, seejärel muuda brauseri suurust ja mõõda uuesti mobiili laiusel. Kontrolli, kas vahed skaleeruvad õigesti üle murdepunktide ja kas reageerivad veeris/täidis kohandused töötavad nii nagu disainitud.
Lisa täpsed mõõtmised oma veaaruannetesse: "Nav ja kangelase vaheline lünk on 47px, peaks olema 32px vastavalt disainispetsifikatsioonile." Inforiba väärtused saab kopeerida otse Jira piletitesse või GitHub probleemidesse.
Klõpsa kahel elemendil, mis peaksid olema horisontaalselt joondatud. Kui Y kaugus on 0px, on need täiuslikult joondatud. Iga nullist erinev Y väärtus näitab vertikaalset valesjoondust — täpne arv ütleb, kui palju pikslit see kõrvale kaldub.
Ava DevSuite Pro ujuv dokk ja klõpsa Mõõda Kaugust ikoonil. Kursor muutub risti kujuliseks, näidates, et saad valida esimese elemendi.
Klõpsa mis tahes elementi lehel. See tõstetakse esile sinise äärised ja märgistatakse "Element A" koos oma mõõtmetega (laius × kõrgus pikslites).
Klõpsa teist elementi. See tõstetakse esile rohelise äärised ja märgistatakse "Element B". Mõõtejooned ilmuvad kohe, ühendades kahte elementi.
Ilmub kolm mõõtejoont: horisontaalne (X) merevaiguvärvis, vertikaalne (Y) punases ja diagonaalne lillas. Igal joonel on silt, mis näitab pikslite kaugust. Allosas olev inforiba võtab kõik väärtused kokku.
Klõpsa teist elementide paari, et mõõta uut kaugust kohe. Klõpsa doki Mõõda Kaugust ikoonil tööriista deaktiveerimiseks, kui oled lõpetanud.
Paigaldage DevSuite Pro tasuta ja avage 39+ arendustööriista oma brauserile.
