CRX id
jfbbgijjljfbolelfkopkhbfjajjampm
jfbbgijjljfbolelfkopkhbfjajjampm
Description from extension meta
Messen Sie Größen, Abstände, Ränder und Abstände von jedem Element auf jeder Webseite.
Image from store
Description from store
Screen Ruler ist der perfekte Begleiter für Webentwickler und Designer, die die Umsetzung ihrer Websites validieren möchten. Einmal aktiviert, ermöglicht Screen Ruler das Anzeigen von Größen, Rändern, Abständen, Tag-Namen, IDs und Klassen einfach durch das Überfahren eines Elements. Sie können auch ein Element auswählen, um Abstände zu anderen Elementen zu messen.
Verwendung
- Screen Ruler aktivieren/deaktivieren, indem Sie auf das Erweiterungssymbol klicken, "Screen Ruler" aus dem Rechtsklick-Menü auswählen oder den Shortcut `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, dadurch wird die Hervorhebung rot. Zum Abwählen klicken Sie erneut, drücken Sie Escape oder wählen Sie ein anderes Element aus.
- Um das übergeordnete Element auszuwählen, verwenden Sie `Alt/Option + Oben`, um Ihre Auswahl auf das übergeordnete Element zu verschieben. Verwenden Sie `Alt/Option + Unten`, um Ihre Auswahl umzukehren.
- Öffnen Sie das Seitenpanel, um das berechnete CSS des aktuell ausgewählten Elements anzuzeigen. Klicken Sie auf die Schaltfläche "CSS kopieren", um das berechnete CSS des aktuell ausgewählten Elements in die Zwischenablage zu kopieren.
Funktionen
- Messen Sie die Pixelgröße eines beliebigen Elements.
- Messen Sie den Pixelabstand zwischen zwei beliebigen Elementen.
- HTML-Tag-Namen, Klassennamen und IDs.
- Tastenkombinationen zur Auswahl von Eltern-/Kindelementen.
- Responsive Auswahlen passen sich der Größe des Browserfensters an.
- Zugriff über das Kontextmenü.
- Berechnetes CSS inspizieren.
- CSS in die Zwischenablage kopieren.
- Funktioniert auf jeder Webseite.
- Passen Sie Tastenkombinationen an, indem Sie `chrome://extensions/shortcuts` besuchen.
Screen Ruler PRO
Screen Ruler bietet auch eine PRO-Stufe, die zusätzliche Funktionen freischaltet.
1. Element-Inspektion: Sehen Sie die Eigenschaften eines Elements, wenn Sie mit der Maus darüber fahren. Beinhaltet Informationen über die Position des Elements, Größe, gerenderte Schrift, Farben und mehr.
2. Layout-Raster: Überlagern Sie ein Layout-Raster über die Seite, um die Ausrichtung Ihrer Designs zu validieren.
3. Erfassen Sie einen Screenshot des aktuell hervorgehobenen Bereichs, indem Sie auf die Screenshot-Steuerung klicken oder die Tastenkombination `Ctrl/Command + Shift + S` verwenden. Perfekt für Dokumentationen oder zum Anhängen an Github-Tickets.
4. Sehen Sie erweiterte Eigenschaften im Seitenpanel des Browsers, einschließlich Box-Modell des Elements, Auswahlfarben, Assets und mehr.
Screen Ruler PRO erfordert eine einmalige Zahlung für lebenslangen Zugang. Um auf PRO zu upgraden, klicken Sie im Kontextmenü auf "Upgrade to PRO" oder klicken Sie mit der rechten Maustaste auf das Erweiterungssymbol, um Upgrade-Optionen anzuzeigen.
Screen Ruler ist gemacht für
- Entwickler: Erkennen von Layout-Problemen oder Identifizieren von Ausrichtungsproblemen. Egal, ob Sie Ränder und Abstände anpassen oder einfach nur sicherstellen, dass alles richtig ausgerichtet ist, Screen Ruler wird zu einem unverzichtbaren Bestandteil Ihres Entwickler-Toolkits.
- Designer: Stellen Sie sicher, dass Ihre Designs pixelgenau umgesetzt wurden. Screen Ruler fungiert als Brücke zwischen Design und Entwicklung und ermöglicht es Ihnen zu überprüfen, ob jedes Element genau so ausgerichtet ist, wie Sie es beabsichtigt haben.
Installation
- Screen Ruler wurde speziell für Stabilität in Google Chrome 116+ entwickelt.
- Screen Ruler ist in jedem Chromium-Browser installierbar. Für die beste Erfahrung stellen Sie jedoch sicher, dass Ihr Browser alle erforderlichen APIs unterstützt (wie Seitenpanel und Offscreen). Wenn es Probleme bei der Installation gibt, aktualisieren Sie Ihren Browser auf die neueste Version und versuchen Sie es erneut.