Mål afstand lader dig klikke på to elementer på en webside og øjeblikkeligt se den præcise pixelafstand mellem dem — vandret (X), lodret (Y) og diagonalt. Visuelle forbindelseslinjer med mærkede målinger vises mellem elementerne, og en infobarre viser begge elementers dimensioner og afstandene i alle tre retninger.
Kontrol af afstanden mellem to elementer i browser-DevTools kræver, at du svæver over hvert element separat, læser margin/padding-værdier og laver mental matematik for at beregne den faktiske visuelle afstand. Mål afstand eliminerer dette fuldstændigt. Klik på Element A, klik på Element B, og de præcise pixelafstande vises øjeblikkeligt — X (vandret), Y (lodret) og diagonal — vist som mærkede linjer, der forbinder de to elementer direkte på siden. Værktøjet måler fra elementkanter (bounding boxes), så værdierne repræsenterer det faktiske visuelle mellemrum mellem elementer, som brugeren ser dem. Dette er anderledes end at læse margin/padding-værdier, som ikke tager højde for den kumulative effekt af flere afstandsegenskaber. Hvert valgt element er fremhævet med en farvet kant og viser sine egne dimensioner (bredde x højde), så du kan se både elementstørrelser og afstanden mellem dem i én visning.
Klik på det første element (fremhævet med en blå kant), klik derefter på det andet element (fremhævet med en grøn kant). Afstandene mellem deres bounding boxes beregnes og vises øjeblikkeligt. Ingen trækning, ingen manuel input — bare to klik.
Se den vandrette afstand (X), lodrette afstand (Y) og diagonale afstand simultant — hver vist med sin egen farvekodede målelinje og etiket. X i rav, Y i rødt, diagonal i lilla.
Stiplede målelinjer forbinder de to valgte elementer direkte på siden med afstandsetiketter placeret ved midtpunktet på hver linje. Den visuelle repræsentation gør det øjeblikkeligt klart, hvad der måles.
Hvert valgt element viser sine egne bredde x højde dimensioner i en lille etiket. Dette lader dig se både elementstørrelser og afstanden mellem dem i den samme visning — uden at skifte værktøjer.
Klik på et nyt par elementer for øjeblikkeligt at opdatere målingerne. Intet behov for at deaktivere og genaktivere værktøjet. De tidligere målelinjer erstattes med nye for det nye elementpar.
En vedvarende infobarre i bunden af viewporten viser en kompakt oversigt: begge elementers navne og dimensioner plus alle tre afstandsværdier (X, Y, diagonal). Kopieringsvenlig til at indsætte i fejlrapporter eller designfeedback.
Mockuppen siger, at knappen skal være 24px under overskriften. Klik på overskriften, klik på knappen og bekræft, at Y-afstanden er præcis 24px. Fanger subtile afstandsafvigelser, der er usynlige for øjet, men specificeret i design-tokens.
Mål afstanden mellem Kort 1 og Kort 2, derefter mellem Kort 2 og Kort 3. Hvis mellemrummene ikke er identiske, har du fundet en inkonsistens — sandsynligvis forårsaget af forskellige margener eller et flexbox-gap-problem.
Mål elementafstande ved desktop-bredde, ændr derefter størrelse på browseren og mål igen ved mobil-bredde. Verificer, at afstanden skaleres korrekt på tværs af breakpoints, og at responsive margin/padding-justeringer fungerer som designet.
Medtag præcise målinger i dine fejlrapporter: Mellemrummet mellem nav og hero er 47px, skal være 32px ifølge designspecifikationen. Infobarre-værdierne kan kopieres direkte til Jira-billetter eller GitHub-issues.
Klik på to elementer, der skal være vandret justeret. Hvis Y-afstanden er 0px, er de perfekt justeret. Enhver ikke-nul Y-værdi indikerer en lodret fejljustering — det præcise tal fortæller dig, hvor mange pixels det er forskudt.
Åbn den flydende DevSuite Pro-dock, og klik på Mål afstand-ikonet. Markøren ændres til et trådkors, der angiver, at du kan vælge det første element.
Klik på et element på siden. Det fremhæves med en blå kant og mærkes Element A med dets dimensioner (bredde x højde i pixels).
Klik på et andet element. Det fremhæves med en grøn kant og mærkes Element B. Målelinjer vises øjeblikkeligt og forbinder de to elementer.
Tre målelinjer vises: vandret (X) i rav, lodret (Y) i rødt og diagonal i lilla. Hver linje har en etiket, der viser pixelafstanden. Infobarren i bunden opsummerer alle værdier.
Klik på et andet par elementer for øjeblikkeligt at måle en ny afstand. Klik på Mål afstand-ikonet i docken for at deaktivere værktøjet, når du er færdig.
Installera DevSuite Pro gratis och lås upp 39+ utvecklarverktyg för din webbläsare.
