Measure Distance laat u op twee elementen op een webpagina klikken en onmiddellijk de exacte pixelafstand daartussen zien — horizontaal (X), verticaal (Y) en diagonaal. Visuele verbindingslijnen met gelabelde metingen verschijnen tussen de elementen, en een infobalk toont de afmetingen van beide elementen en de afstanden in alle drie richtingen.
Het controleren van de afstand tussen twee elementen in de browsertools voor ontwikkelaars vereist het afzonderlijk aanwijzen van elk element, het lezen van marge/vulwaarden en het mentaal berekenen van de werkelijke visuele afstand. Measure Distance elimineert dit volledig. Klik op Element A, klik op Element B, en de exacte pixelafstanden verschijnen onmiddellijk — X (horizontaal), Y (verticaal) en diagonaal — weergegeven als gelabelde lijnen die rechtstreeks op de pagina verbinding maken met de twee elementen. De tool meet van elementranden (omsluitende kaders), dus de waarden vertegenwoordigen de werkelijke visuele opening tussen elementen zoals de gebruiker deze ziet. Dit verschilt van het lezen van marge/vulwaarden, die geen rekening houden met het cumulatieve effect van meerdere afstandseigenschappen. Elk geselecteerd element is gemarkeerd met een gekleurde rand en toont zijn eigen afmetingen (breedte × hoogte), zodat u zowel de elementgroottes als de afstand daartussen in één weergave kunt zien.
Klik op het eerste element (gemarkeerd met een blauwe rand) en vervolgens op het tweede element (gemarkeerd met een groene rand). De afstanden tussen hun omsluitende kaders worden onmiddellijk berekend en weergegeven. Geen slepen, geen handmatige invoer — gewoon twee klikken.
Zie de horizontale afstand (X), verticale afstand (Y) en diagonale afstand tegelijk — elk weergegeven met zijn eigen kleurgecodeerde meetlijn en label. X in amber, Y in rood, diagonaal in paars.
Gestippelde meetlijnen verbinden de twee geselecteerde elementen rechtstreeks op de pagina, met afstandslabels op het middelpunt van elke lijn. De visuele weergave maakt onmiddellijk duidelijk wat wordt gemeten.
Elk geselecteerd element toont zijn eigen breedte × hoogte-afmetingen in een klein label. Dit laat u zowel de elementgroottes als de afstand daartussen in dezelfde weergave zien — zonder tools om te schakelen.
Klik op een nieuw paar elementen om metingen direct bij te werken. U hoeft het gereedschap niet te deactiveren en opnieuw te activeren. De vorige meetlijnen worden vervangen door nieuwe voor het nieuwe elementenpaar.
Een permanente infobalk onderaan de viewport toont een compacte samenvatting: namen en afmetingen van beide elementen, plus alle drie afstandswaarden (X, Y, diagonaal). Kopieervriendelijk om in bugrapporten of ontwerpopmerkingen in te plakken.
De mockup zegt dat de knop 24px onder de kop moet liggen. Klik op de kop, klik op de knop en bevestig dat de Y-afstand precies 24px is. Vangt subtiele afstandsverschillen op die voor het oog onzichtbaar zijn, maar gespecificeerd in ontwerptokens.
Meet de afstand tussen Kaart 1 en Kaart 2, vervolgens tussen Kaart 2 en Kaart 3. Als de gaten niet identiek zijn, hebt u een inconsistentie gevonden — waarschijnlijk veroorzaakt door verschillende marges of een flexbox-gapprobleem.
Meet elementafstanden op desktopbreedte, wijzig vervolgens het formaat van de browser en meet opnieuw op mobiele breedte. Verifieer dat afstanden correct over breekpunten worden geschaald en dat aanpassingen aan responsieve marges/vullingen naar behoren functioneren.
Voeg nauwkeurige metingen in uw bugrapporten op: "De opening tussen nav en hero is 47px, moet 32px zijn volgens de ontwerpspecificatie." De infobalkwaarden kunnen rechtstreeks in Jira-tickets of GitHub-problemen worden gekopieerd.
Klik op twee elementen die horizontaal moeten worden uitgelijnd. Als de Y-afstand 0px is, zijn ze perfect uitgelijnd. Elke niet-nulwaarde van Y geeft aan dat deze verticaal verkeerd is uitgelijnd — het exacte getal geeft aan hoeveel pixels dit verschilt.
Open het floating dock van DevSuite Pro en klik op het pictogram Afstand meten. De cursor verandert in een kruishaar, wat aangeeft dat u het eerste element kunt selecteren.
Klik op een element op de pagina. Deze is gemarkeerd met een blauwe rand en gelabeld "Element A" met de bijbehorende afmetingen (breedte × hoogte in pixels).
Klik op een tweede element. Dit is gemarkeerd met een groene rand en gelabeld "Element B." Meetlijnen verschijnen onmiddellijk tussen de twee elementen.
Er verschijnen drie meetlijnen: horizontaal (X) in amber, verticaal (Y) in rood en diagonaal in paars. Elke lijn heeft een label met de pixelafstand. De infobalk onderaan geeft een samenvatting van alle waarden.
Klik op een ander paar elementen om een nieuwe afstand direct te meten. Klik op het pictogram Afstand meten in het dock om het gereedschap uit te schakelen.
Installeer DevSuite Pro gratis en ontgrendel 64+ ontwikkelaarstools voor uw browser.
