Dimensions

Eine kurze Beschreibung

Dimensions ist eine Browser-Erweiterung zur Messung der Größe des Webseitenbildschirms. Sie kann anhand der Mausposition die Grenzen nach oben, unten, links und rechts ermitteln und so schnell die Pixelabstände zwischen Elementen sowie die Größe von zusammenhängenden Bereichen anzeigen.

Einführung in die Tools

Dimensions wurde von Felix Niklas entwickelt und richtet sich hauptsächlich an Webdesigner, Frontend-Entwickler und Qualitätsprüfer. Es handelt sich um ein leichtes Messwerkzeug, das keine Inhalte erzeugt, kein großes Sprachmodell besitzt und auch nicht zu den AI-Produkten zählt.

Die ursprünglich von der Datenbank verwendete Domain dimensions.ink wurde in einen Inhalt für Glücksspiele umgewandelt, der nichts mit den Produkten zu tun hat, und kann daher nicht mehr als offizieller Eingangspunkt genutzt werden. Derzeitige zuverlässige Eingangspunkte sind der offizielle Shop im Browser sowie das von mrflix betriebene Open-Source-Repositorium.

Überblick über die Kernfunktionen

Hauptfunktionen

Messung des Abstands zwischen Webseiten-Elementen

Die Erweiterung sucht von der Mausposition aus in vier Richtungen nach Farben oder Elementgrenzen und zeigt die Entfernung an. Sie eignet sich zur Überprüfung des Abstands zwischen Bildern, Eingabefeldern, Schaltflächen, Videos, GIFs, Texten und Icons.

Messung kontinuierlicher Bereiche

Durch Halten der Alt-Taste können kontinuierliche Bereiche gemessen werden – das eignet sich zur Schätzung des Radius eines Kreises oder der Größe eines einfarbigen Bereichs. Gradienten, Schatten und Texturen führen zu vielen Änderungen der Pixel, wodurch die Grenzen möglicherweise früher enden.

Entwurfsmaße

Die Benutzer können die PNG- oder JPEG-Dateien direkt in Chrome ziehen und anschließend Dimensions zum Messen verwenden. Die Skalierung im Browser muss bei 100 % bleiben, andernfalls könnten die Bildpunkte auf dem Bildschirm nicht mit den ursprünglichen Bildpunkten der Datei übereinstimmen.

Tastenkürzel

Standardmäßig kann die Erweiterung mit Alt + D aktiviert bzw. deaktiviert werden. Zum Messen des Bereichs wird die Taste Alt als Hilfstaste verwendet. Falls die Tastenkombination mit dem Betriebssystem oder anderen Erweiterungen kollidiert, kann sie auf der Seite zur Anpassung der Tastenkombinationen für Browsererweiterungen neu eingestellt werden.

Automatische Farbanpassung

Die Erweiterung passt die Farbe der Messmarkierungen an den Hintergrund an, um die Lesbarkeit auf dunklen und hellen Seiten zu verbessern. Auf komplexen Hintergründen können die Werte dennoch schwer zu erkennen sein; störende Elemente können vorübergehend versteckt werden.

Installationsanleitung

1. Öffnen Sie den offiziellen Chrome-Erweiterungsladen und suchen Sie nach dem vollständigen Namen Dimensions.
2. Bestätigung der Entwicklerinformationen, der Versionnummer 3.0.1 sowie der Beschreibung der Bildschirmmessfunktion.
3. Überprüfen Sie die Datenschutzbestimmungen und die erforderlichen Berechtigungen, bevor Sie auf „Zum Browser hinzufügen“ klicken.
4. Festhalten Sie die Erweiterung an der Werkleiste, um sie ohne Tastenkürzel starten zu können.
5. Öffnen Sie eine Testseite und drücken Sie Alt plus D, um zu überprüfen, ob die Abdeckschicht angezeigt wird.
6. Nach Abschluss der Messung drücken Sie erneut die Schnelltaste, um sie zu schließen und eine Störung der normalen Navigation zu vermeiden.

Leitfaden zur Messung der Webseitengröße

1. Stellen Sie die Skalierung der Browserseite auf 100 % ein und überprüfen Sie, ob die Gerätesimulation aktiviert ist.
2. Starten Sie Dimensions, legen Sie den Mauszeiger auf die Lücke oder den Rand des Elements, das gemessen werden soll.
3. Liest die Pixelentfernungen in den Richtungen oben, unten, links und rechts des Zeigerwertes aus.
4. Bewegen Sie sich an eine andere Stelle und wiederholen Sie die Messung, um Fehlinterpretationen durch Schatten oder Text auszuschließen.
5. Um die Größe des Bereichs zu ermitteln, halten Sie die Taste Alt gedrückt, damit das Tool die kontinuierlichen Grenzen erkennt.
6. Vergleichen Sie die Ergebnisse mit dem Box-Modell der Entwicklerwerkzeuge, den CSS-Werten sowie dem Bildschirm-Pixel-Verhältnis.
7. Die Breite des Ansichtsfensters sowie die Skalierungsbedingungen werden aufgezeichnet, um zu vermeiden, dass Daten aus unterschiedlichen Umgebungen miteinander vermischt werden.

Prozess zur Überprüfung von Entwürfen

1. Erhalten Sie das ursprüngliche PNG- oder JPEG-Design, das nicht durch Chat-Software komprimiert wurde.
2. Öffnen Sie das Bild in einem neuen Tab des Browsers und halten Sie die Skalierung bei 100 %.
3. Starten Sie Dimensions, um Randabstände, Abstände zwischen Komponenten sowie kontinuierliche Farbbereiche zu messen.
4. Für Textur-, Gradienten- oder Schattenbereiche sollten künstliche Grenzen oder Entwicklungstools verwendet werden.
5. Vergleichen Sie die Messwerte mit den Angaben in den Designdokumenten sowie mit dem tatsächlichen CSS auf der Website.
6. Wenn Unterschiede festgestellt werden, sollten gleichzeitig das Pixelverhältnis des Geräts, die Bildskalierung sowie die responsiven Bruchpunkte überprüft werden.

Für welche Benutzer geeignet

• Webdesigner: Schnelle Überprüfung der Ränder und Komponentengrößen im visuellen Entwurf.
• Frontend-Entwickler: Überprüfen der Pixelunterschiede zwischen der implementierten Seite und dem Entwurf.
• UI-Tester: Überprüfen Sie den Abstand zwischen Schaltflächen, Formularen, Icons und Texten.
• Produktmanager: Notieren Sie offensichtliche Layoutprobleme auf der Bewertungsseite.
• Schüler und Anfänger: Intuitives Erkennen der Größenverhältnisse zwischen den Elementen einer Webseite.
• Open-Source-Entwickler: Entwicklung oder Verbesserung der Messlogik auf der Grundlage von MIT-Code.

Typische Anwendungsszenarien

• Messen Sie den horizontalen Abstand zwischen den Icons und dem Text in der Navigationsleiste.
• Überprüfen Sie den vertikalen Abstand zwischen den Überschriften, Bildern und Schaltern innerhalb der Karte.
• Schätzen Sie die Anzeigegröße von Eingabefeldern, Schaltflächen oder Videos auf dem Bildschirm.
• Vergleichen Sie die Änderungen der Ränder im Desktop- und im responsiven Ansichtsfeld.
• Öffnen Sie das statische Mockup und extrahieren Sie die für die Entwicklung benötigten Pixelreferenzen.
• Erkennen der ungefähren Grenzen von zusammenhängenden Farbflecken oder kreisförmigen Bereichen.
• Schnelle Lokalisierung von Layout-Abweichungen in visuellen Regressionstests.

Vorteile des Produkts

• Es ist kein Account-Anmeldung erforderlich; man kann es direkt nach der Installation verwenden.
• Einfache Bedienung – durch Bewegung der Maus lassen sich die Entfernungen in alle Richtungen ermitteln.
• Unterstützt gängige Inhalte wie Bilder, Schaltflächen, Eingabefelder, Videos, Texte und Icons.
• PNG- und JPEG-Entwürfe können direkt im Browser gemessen werden.
• Die Installationsdatei ist klein und erfordert weder Cloud-Dienste noch Abonnements.
• Die Datenschutzerklärung des Chrome Stores besagt, dass keine Benutzerdaten gesammelt oder verwendet werden.
• Der Quellcode ist öffentlich und unter einer liberalen MIT-Lizenz verfügbar.
• Die Serie 3.0 hat auf Manifest V3 umgestellt und ist mit modernen Chrome-Versionen kompatibel.

Einsatzbeschränkungen und Hinweise

• Dimensions ist kein AI-Tool, es bietet lediglich Bildschirmmessungen auf der Grundlage der Pixelgrenzen.
• Die ursprüngliche Domain dimensions.ink wurde zu einer irrelevanten Glücksspiel-Website, die nicht aufgerufen oder zum Herunterladen genutzt werden sollte.
• Bilder und komplexe Hintergründe können die Erkennung von Grenzen durch häufige Änderungen der Pixel beeinträchtigen.
• Gradienten, Schatten, Antialiasing und Transparenz können zu Wertabweichungen führen.
• Wenn die Zoom-Einstellung des Browsers nicht bei 100 % liegt, können die gemessenen Werte nicht den ursprünglichen Entwurfsmaßen entsprechen.
• CSS-Pixel, Gerätepixel und Screenshot-Pixel entsprechen sich nicht in allen Umgebungen eins-zu-eins.
• Es kann das Entwickler-Toolkit-Modell, die Responsivitätsprüfung und die Barrierefreiheitstests nicht ersetzen.
• Die Manifest-V3-Version erfordert Chrome 88 oder neuer; ältere Browser werden nicht mehr unterstützt.
• Die Erweiterung bietet nur eine englische Benutzeroberfläche; es wurde keine offizielle chinesische Lokalisierung festgestellt.
• Das Installieren von Erweiterungen erhöht stets die Angriffsfläche des Browsers – sie sollten ausschließlich aus dem offiziellen Store heruntergeladen werden.

Preis und Version

Stand zum 22. August 2026 kann Dimensions kostenlos im offiziellen Chrome-Shop heruntergeladen werden – es gibt weder Abonnements noch eine Probephase oder kostenpflichtige Pakete. Der Quellcode des Projekts kann ebenfalls unter der MIT-Lizenz kostenlos genutzt werden.

Browser- und Versionssupport

Privatsphäre und Sicherheit

Der Chrome Store zeigt an, dass die Entwickler erklären, keine Benutzerdaten zu sammeln oder zu verwenden, diese weder zu verkaufen noch für unzulässige Zwecke oder zur Kreditbewertung einzusetzen. Die grundlegende Logik der Erweiterung wird auf der aktuellen Seite ausgeführt.

• Installieren Sie ausschließlich aus dem offiziellen Chrome-Shop und verwenden Sie keine ursprünglichen, nicht mehr gültigen Domainnamen zur Herunterladung von Dateien.
• Prüfen Sie vor der Installation die Version, den Entwickler, die Berechtigungen und das Update-Datum.
• Unternehmensgeräte sollten über eine erweiterte Allowlist und zentrale Steuerung von Richtlinien verwaltet werden.
• Bei der Messung des internen Systems muss weiterhin die Berechtigung zur Erweiterung des Zugriffs auf Seiteninhalte bewertet werden.
• Prüfen Sie regelmäßig die Datenschutzerklärung des Shops sowie die Hinweise zu Versionserneuerungen.
• Wenn es nicht mehr verwendet wird, sollte es aus dem Browser entfernt werden – anstatt nur das Icon zu verbergen.

Risiko eines ungültigen Domainnamens für die offizielle Website

Die ursprüngliche Website der Datenbank, dimensions.ink, zeigt derzeit Inhalte im Bereich Glücksspiele, die nichts mit Browser-Erweiterungen zu tun haben. Sowohl die Namen der Produkte als auch die Zwecke der Seiten haben sich geändert. Die Domain kann daher nicht mehr über Funktionen, Preise, Datenschutzaspekte oder die Identität des Entwicklers Auskunft geben.

Die Benutzer sollten die Installation über den offiziellen Chrome-Store bestätigen und sich den Code sowie die Versionen im Open-Source-Repository von mrflix ansehen. Geben Sie keine Kontoinformationen oder Zahlungsdaten in ungültige Domaine ein, und laden Sie keine unbekannten Dateien herunter.

APIs, SDKs und Open Source

Dimensions ist eine Open-Source-Browsererweiterung, die weder eine Cloud-API noch Entwickler-Schlüssel oder ein eigenständiges SDK bietet. Entwickler können den Quellcode der Erweiterung direkt lesen und ändern; bei der Weiterverbreitung muss die MIT-Lizenz eingehalten werden.

Grundlegende Informationen

Empfehlungswert

Die Empfehlungswertung beträgt 3,8 von 5 Punkten. Dimensions ist klein und einfach in der Bedienung – ideal als schnelle Referenz für Pixel bei der Webseitengestaltung und Frontend-Entwicklung. Zudem ist es open source und gibt es keine Aussagen bezüglich der Datenerfassung; das macht es besonders transparent.

Die Abzugspunkte entstehen hauptsächlich dadurch, dass es sich nicht um ein AI-Tool handelt, der Messalgorithmus von komplexen Bildern beeinflusst werden kann und die ursprüngliche Domain des Webseitenbetreibers nicht mehr gültig ist. Für eine professionelle Nutzung sind weiterhin die Entwicklerwerkzeuge des Browsers sowie die Quelldateien für das Design erforderlich.

Häufige Fragen

Ist Dimensions ein KI-Tool?

Nein. Es misst den Bildschirm anhand der Pixel und Grenzen der Browserseite – es verfügt weder über KI-Funktionen noch über Sprachmodelle oder maschinelles Lernen.

Ist Dimensions kostenlos?

Kostenlos – im Chrome Store gibt es weder Abonnements noch In-App-Käufe. Der Quellcode wird ebenfalls unter der MIT-Lizenz veröffentlicht.

Muss man sich registrieren?

Nicht notwendig. Nach der Installation der Erweiterung kann die Messung direkt in der Webseite gestartet werden.

Wie startet man die Messung?

Standardmäßig wird es mit Alt plus D gestartet oder beendet. Beim Messen von kontinuierlichen Bereichen kann man Alt gedrückt halten; bei Konflikten mit anderen Tastenkombinationen kann dies in Chrome geändert werden.

Warum sind die Bildmessungen ungenau?

Bilder, Gradienten und Antialiasing führen zu einer Pixel für Pixel unterschiedlichen Farbgebung, wobei Algorithmen diese Veränderungen als Grenzen erkennen könnten. In solchen Fällen sollten Entwicklerwerkzeuge oder Designdateien herangezogen werden.

Wird Chinesisch unterstützt?

Der Laden listet derzeit nur auf Englisch auf. Die Funktionen werden hauptsächlich über Zahlenwerte und Tastenkombinationen gesteuert, die chinesische Seite lässt sich dennoch messen.

Wird Daten von Webseiten gesammelt?

Die aktuelle Datenschutzerklärung des Chrome Stores besagt, dass Entwickler keine Benutzerdaten sammeln oder nutzen. Die Nutzer sollten den tatsächlichen Berechtigungen beim Installieren dennoch Aufmerksamkeit schenken.

Ist die ursprüngliche Website noch nutzbar?

Es kann nicht als Eingangspunkt für Produkte verwendet werden. Die ursprüngliche Seite dimensions.ink zeigt bereits keine Inhalte im Zusammenhang mit Glücksspielen an; die Installation sollte über den offiziellen Chrome-Shop erfolgen.

Wird eine API oder SDK bereitgestellt?

Nicht verfügbar. Es handelt sich um eine Browsererweiterung, die Entwickler direkt für Forschungszwecke oder zur Anpassung unter Verwendung des MIT-Open-Source-Code nutzen können.

Ist Dimensions Open Source?

Open Source – das offizielle Repository verwendet die MIT-Lizenz. Das Open-Source-Repository hat keine Verbindung zu der wissenschaftlichen Datenbank mit dem gleichen Namen oder zu den Inkscape-Plugins.

Zusammenfassung

Dimensions ist eine leichte Browser-Erweiterung, die sich auf die Messung der Pixelabstände auf einer Webseite konzentriert. Sie eignet sich zur schnellen Überprüfung der Abstände auf einer Seite sowie von statischen Designvorschlägen, kann aber keine vollwertigen Entwicklungs- und Designmesswerkzeuge ersetzen.

Die wichtigste aktuelle Veränderung ist, dass die ursprüngliche Domain der offiziellen Website nicht mehr gültig ist. Die Nutzer sollten die Anwendung aus dem offiziellen Store herunterladen und dort die Version, den Code sowie die Lizenz überprüfen.