Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

News

Dimensions: Chrome-Extension zur Vermessung der Webwelt

Websites vermessen mit der Chrome-Extension Dimensions (Screenshot: felixniklas.com/dimensions).

Dimensions ist eine Chrome-Extension, mit der sich die Elemente auf Websites im Handumdrehen vermessen lassen. Ein Mausklick reicht aus, um mit dem Fadenkreuz der Anwendung die Pixelwelt zu erkunden. Wir haben das Tool für euch ausprobiert.

Präzise und verzögerungsfrei Maß nehmen

Auf den ersten Blick lässt sich beim Betrachten einer Website nur erahnen, wie die einzelnen Elemente im Pixelgefüge zueinander stehen. Will man es genauer wissen, ist ein Werkzeug nötig, mit dem sich die Abstände zwischen Bildern und einzelnen sichtbaren Bestandteilen des HTML-Codes ermitteln lassen. Genau diesen Zweck erfüllt das von Felix Niklas entwickelte digitale Lineal mit dem Namen Dimensions. Die kostenlose Erweiterung für den Chrome-Browser liefert pixelgenau die Distanzen zwischen Bildern, Input-Feldern, Buttons, Videos, Texten, Icons, Animationen und anderen wahrnehmbaren Elementen einer Website. Dabei lässt sich die Anwendung denkbar einfach bedienen.

Ein Klick auf das Fadenkreuz-Symbol in Chrome oder ein vorher festgelegter Tastatur-Shortcut reicht aus, um Dimensions zu starten. Daraufhin erscheint im Browserfenster ein blaues Fadenkreuz, das den Abstand zwischen den Elementen ermittelt, zwischen denen der Cursor aktuell platziert ist. Beim Navigieren des Mauszeigers über den Inhalt des Browsers folgt Dimensions ohne spürbare Verzögerung und vermeldet dabei immer die gerade gemessenen horizontalen und vertikalen Abstände in der Lesart Pixel x Pixel.

Wie auf der Website des Entwicklers deutlich wird, macht die Chrome-Extension Dimensions auch vor kurvigen Elementen nicht Halt. (Screenshot: felixniklas.com/dimensions).
Wie auf der Website des Entwicklers deutlich wird, macht die Chrome-Extension Dimensions auch vor kurvigen Elementen nicht Halt. (Screenshot: felixniklas.com/dimensions).

Dimensions: Chrome-Extension im Store und bei GitHub

Die Vermessung von Browserinhalten mit Dimensions beschränkt sich nicht auf Websites. Entwickler Niklas verweist auf das Szenario, in dem nur ein Mockup eines Designs als JPG oder PNG vorliegt. Auch hier lassen sich mit der Browser-Extension Vermessungen realisieren. Dazu muss das gewünschte Bild nur im Browser geöffnet werden. Dimensions ist auch dann in der Lage, basierend auf farblichen Unterschieden Abstände zu ermitteln.

Die Chrome-Extension Dimensions, erhältlich im Chrome-Web-Store, ist ein Open-Source-Projekt und wird als solches auf GitHub gehostet. Felix Niklas ruft dazu auf, gerne die Möglichkeiten des Social Codings der Hosting-Plattform zu nutzen und mittels Forks an Dimensions mitzuwirken. So könnte es vielleicht auch bald eine Version der Anwendung für Firefox oder andere Browser geben.

Ebenfalls interessant:

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.