Screen Ruler - Measure The Web

Screen Ruler ist der perfekte Begleiter für Webentwickler und Designer, die die Implementierung ihrer Websites validieren möchten. Einmal aktiviert, ermöglicht es Ihnen, Größen, Ränder, Abstände, Tag-Namen, IDs und Klassen durch einfaches Überfahren von Webinhalten mit der Maus anzuzeigen. Sie können auch ein Element auswählen, um Abstände zu anderen zu messen.

Verwendung

- Schalten Sie die Erweiterung um, indem Sie auf das Symbol klicken, sie aus dem Rechtsklick-Kontextmenü auswählen oder die Verknüpfung `Alt/Option + Shift + R` verwenden.
- Fahren Sie mit der Maus über Elemente auf Webseiten, um deren Größen, Ränder, Abstände, Tag-Namen, IDs und Klassen anzuzeigen.
- Wählen Sie ein Element aus, indem Sie direkt darauf klicken; dies färbt die Hervorhebung rot. Um die Auswahl aufzuheben, klicken Sie erneut, drücken Sie Escape oder wählen Sie ein anderes Element.
- Um das übergeordnete Element auszuwählen, verwenden Sie `Alt/Option + Auf`. Verwenden Sie `Alt/Option + Ab`, um Ihre Auswahl umzukehren.
- Zeigen Sie das berechnete CSS des aktuell ausgewählten Elements im Seitenpanel an. Klicken Sie auf die Schaltfläche "CSS kopieren", um das berechnete CSS in Ihre Zwischenablage zu kopieren.

Funktionen

- Messen Sie die Pixelgröße jedes Elements.
- Messen Sie den Pixelabstand zwischen zwei beliebigen Elementen.
- HTML-Tag-Namen, Klassennamen und IDs.
- Tastenkombinationen für Eltern/Kind-Auswahl.
- Responsive Auswahlen passen sich der Größe Ihres Browserfensters an.
- Zugriff über das Kontextmenü.
- Inspektion des berechneten CSS.
- CSS in die Zwischenablage kopieren.
- Seitenlineale für präzise Messungen (horizontale und vertikale Hilfslinien mit Fadenkreuz).
- Farbauswahlwerkzeug zum Aufnehmen und Kopieren von Farben von überall auf der Seite.
- Element-Screenshots: Erfassen Sie zugeschnittene Screenshots ausgewählter Elemente mit `Ctrl/Cmd + Shift + S`.
- Funktioniert auf jeder Webseite.
- Passen Sie Tastenkombinationen an, indem Sie `chrome://extensions/shortcuts` besuchen.

Screen Ruler PRO
Ein PRO-Tier ist ebenfalls verfügbar, das zusätzliche Funktionen freischaltet.

- Schwebender Inspektor: Sehen Sie detaillierte Element-Eigenschaften beim Überfahren, einschließlich Position, Größe, gerenderter Schriftart, Farben und mehr.
- Zugänglichkeitsprobleme: Erkennen und heben Sie WCAG-Kontrastfehler in Ihrer Auswahl automatisch hervor, mit umsetzbaren Empfehlungen.
- Responsiv-Modus: Testen Sie Ihre Designs in verschiedenen Geräte-Viewports mit einem interaktiven Geräte-Emulator und benutzerdefinierten Abmessungen.
- Box-Shadow-Visualisierung: Interaktive Aufschlüsselung von mehrschichtigen Box-Shadows mit einer Explosionsansicht.
- Animationsanalyse: Visualisieren Sie CSS-Animations-Timing-Kurven und kopieren Sie Animationseigenschaften.
- Asset-Extraktion: Extrahieren und laden Sie Bilder, SVGs und Vektor-Assets herunter.
- Farbextraktion: Extrahieren und kopieren Sie Farbpaletten aus ausgewähltem Inhalt mit Hex-, RGB- und HSL-Werten.
- Layout-Raster-Overlay: Überlagern Sie ein anpassbares Layout-Raster für eine perfekte Designausrichtung.
- CSS-Selektor-Suche: Finden und heben Sie Elemente mithilfe von CSS-Selektoren hervor.
- Typografie: Analysieren und extrahieren Sie alle in Ihrer Auswahl verwendeten Typografiestile.
- Röntgenmodus: Decken Sie die zugrundeliegende Struktur der Seite auf, indem Sie alle Inhalte umreißen.

PRO erfordert eine einmalige Zahlung für lebenslangen Zugriff.

Gemacht für

- Entwickler: Erkennen Sie Layout-Probleme oder identifizieren Sie Ausrichtungsprobleme. Ob Sie nun Ränder und Abstände anpassen oder einfach nur sicherstellen, dass alles korrekt ausgerichtet ist, dieses Tool wird zu einer unverzichtbaren Ergänzung Ihres Entwickler-Toolkits.
- Designer: Stellen Sie sicher, dass Ihre Designs mit pixelgenauer Präzision implementiert wurden. Es fungiert als Brücke zwischen Design und Entwicklung und ermöglicht es Ihnen zu überprüfen, ob jede Komponente genau so ausgerichtet ist, wie Sie es beabsichtigt haben.

Installation

- Speziell für die Stabilität in Google Chrome 116+ entwickelt.
- Installierbar auf jedem Chromium-Browser; für das beste Erlebnis stellen Sie jedoch sicher, dass Ihr Browser alle erforderlichen APIs (wie Side Panel und Offscreen) unterstützt. Bei Installationsproblemen aktualisieren Sie Ihren Browser auf die neueste Version und versuchen Sie es erneut.