Abstand messen lässt Sie auf zwei beliebige Elemente einer Webseite klicken und sofort den genauen Pixelabstand zwischen ihnen sehen — horizontal (X), vertikal (Y) und diagonal. Visuelle Verbindungslinien mit beschrifteten Messungen erscheinen zwischen den Elementen, und eine Infoleiste zeigt die Abmessungen beider Elemente und die Abstände in allen drei Richtungen.
Das Überprüfen des Abstands zwischen zwei Elementen in Browser-DevTools erfordert das Hovern über jedes Element separat, das Lesen von Margin/Padding-Werten und mentales Rechnen, um den tatsächlichen visuellen Abstand zu berechnen. Abstand messen eliminiert dies vollständig. Klicken Sie auf Element A, klicken Sie auf Element B, und die genauen Pixelabstände erscheinen sofort — X (horizontal), Y (vertikal) und diagonal — angezeigt als beschriftete Linien, die die zwei Elemente direkt auf der Seite verbinden. Das Tool misst von Elementkanten (Bounding Boxes), sodass die Werte den tatsächlichen visuellen Abstand zwischen Elementen darstellen, wie der Benutzer sie sieht. Dies unterscheidet sich vom Lesen von Margin/Padding-Werten, die den kumulativen Effekt mehrerer Abstands-Eigenschaften nicht berücksichtigen. Jedes ausgewählte Element wird mit einem farbigen Rahmen hervorgehoben und zeigt seine eigenen Abmessungen (Breite × Höhe), sodass Sie sowohl die Elementgrößen als auch den Abstand zwischen ihnen in einer Ansicht sehen können.
Klicken Sie auf das erste Element (mit einem blauen Rahmen hervorgehoben), dann auf das zweite Element (mit einem grünen Rahmen hervorgehoben). Die Abstände zwischen ihren Bounding Boxes werden sofort berechnet und angezeigt. Kein Ziehen, keine manuelle Eingabe — nur zwei Klicks.
Sehen Sie den horizontalen Abstand (X), vertikalen Abstand (Y) und diagonalen Abstand gleichzeitig — jeder mit seiner eigenen farbkodierten Messlinie und Beschriftung angezeigt. X in bernstein, Y in rot, diagonal in lila.
Gestrichelte Messlinien verbinden die zwei ausgewählten Elemente direkt auf der Seite, mit Abstandsbeschriftungen an jedem Mittelpunkt der Linie positioniert. Die visuelle Darstellung macht sofort klar, was gemessen wird.
Jedes ausgewählte Element zeigt seine eigenen Breite × Höhe Abmessungen in einer kleinen Beschriftung. Dies lässt Sie sowohl die Elementgrößen als auch den Abstand zwischen ihnen in derselben Ansicht sehen — ohne Werkzeuge zu wechseln.
Klicken Sie auf ein neues Elementpaar, um die Messungen sofort zu aktualisieren. Kein De- und Reaktivieren des Tools nötig. Die vorherigen Messlinien werden durch neue für das neue Elementpaar ersetzt.
Eine beständige Infoleiste am unteren Rand des Viewports zeigt eine kompakte Zusammenfassung: Namen und Abmessungen beider Elemente sowie alle drei Abstandswerte (X, Y, diagonal). Kopierfähig zum Einfügen in Fehlerberichte oder Design-Feedback.
Das Mockup sagt, der Button sollte 24px unter der Überschrift sein. Klicken Sie auf die Überschrift, klicken Sie auf den Button und bestätigen Sie, dass der Y-Abstand genau 24px beträgt. Erkennt subtile Abstandsabweichungen, die für das Auge unsichtbar, aber in Design-Tokens festgelegt sind.
Messen Sie den Abstand zwischen Karte 1 und Karte 2, dann zwischen Karte 2 und Karte 3. Wenn die Lücken nicht identisch sind, haben Sie eine Inkonsistenz gefunden — wahrscheinlich durch unterschiedliche Margins oder ein Flexbox-Gap-Problem verursacht.
Messen Sie Elementabstände bei Desktop-Breite, ändern Sie dann die Browsergröße und messen Sie erneut bei Mobilbreite. Überprüfen Sie, ob Abstände korrekt über Breakpoints skalieren und ob responsive Margin/Padding-Anpassungen wie vorgesehen funktionieren.
Fügen Sie präzise Messungen in Ihre Fehlerberichte ein: Der Abstand zwischen Nav und Hero ist 47px, sollte laut Design-Spec 32px sein. Die Infoleisten-Werte können direkt in Jira-Tickets oder GitHub-Issues kopiert werden.
Klicken Sie auf zwei Elemente, die horizontal ausgerichtet sein sollten. Wenn der Y-Abstand 0px beträgt, sind sie perfekt ausgerichtet. Jeder Nicht-Null-Y-Wert zeigt eine vertikale Fehlausrichtung — die genaue Zahl sagt Ihnen, wie viele Pixel daneben es ist.
Öffnen Sie die schwebende DevSuite Pro-Dock und klicken Sie auf das Symbol Abstand messen. Der Cursor wechselt zu einem Fadenkreuz, das anzeigt, dass Sie das erste Element auswählen können.
Klicken Sie auf ein beliebiges Element der Seite. Es wird mit einem blauen Rahmen hervorgehoben und als Element A mit seinen Abmessungen (Breite × Höhe in Pixeln) beschriftet.
Klicken Sie auf ein zweites Element. Es wird mit einem grünen Rahmen hervorgehoben und als Element B beschriftet. Messlinien erscheinen sofort, die die zwei Elemente verbinden.
Drei Messlinien erscheinen: horizontal (X) in bernstein, vertikal (Y) in rot und diagonal in lila. Jede Linie hat eine Beschriftung, die den Pixelabstand zeigt. Die Infoleiste unten fasst alle Werte zusammen.
Klicken Sie auf ein anderes Elementpaar, um sofort einen neuen Abstand zu messen. Klicken Sie auf das Symbol Abstand messen in der Dock, um das Tool bei Fertigstellung zu deaktivieren.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 39+ Entwickler-Tools für Ihren Browser frei.
