Screen Ruler - Measure The Web
Extension Actions
- Extension status: Featured
- Live on Store
Messen Sie Größen, Abstände, Ränder und Innenabstände von jedem Element auf jeder Webseite.
Screen Ruler ist der perfekte Begleiter für Webentwickler und Designer, die die Implementierung ihrer Websites validieren möchten. Einmal aktiviert, ermöglicht Screen Ruler Ihnen, Größen, Ränder, Abstände, Tag-Namen, IDs und Klassen einfach durch Hovern über jedes Element zu betrachten. Sie können auch ein Element auswählen, um Abstände zu anderen Elementen zu messen.
Verwendung
- Schalten Sie Screen Ruler ein, indem Sie auf das Erweiterungssymbol klicken, "Screen Ruler" aus dem Rechtsklick-Kontextmenü auswählen oder die Tastenkombination Alt/Option + Shift + R verwenden.
- Fahren Sie ü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 macht die Hervorhebung rot. Zum Abwählen klicken Sie erneut, drücken Escape oder wählen ein anderes Element.
- Um das übergeordnete Element auszuwählen, verwenden Sie Alt/Option + Aufwärts, um Ihre Auswahl zum übergeordneten Element zu verschieben, verwenden Sie Alt/Option + Abwärts, um Ihre Auswahl umzukehren.
- Betrachten Sie das berechnete CSS des aktuell ausgewählten Elements im Seitenpanel. Klicken Sie auf die Schaltfläche "CSS kopieren", um das berechnete CSS des aktuell ausgewählten Elements in Ihre Zwischenablage zu kopieren.
Funktionen
- Messen Sie die Pixelgröße jedes Elements.
- Messen Sie den Pixelabstand zwischen zwei Elementen.
- HTML-Tag-Namen, Klassennamen und IDs.
- Übergeordnet/untergeordnet Auswahlkürzel.
- Responsive Auswahlen ändern die Größe mit Ihrem Browserfenster.
- Zugriff über das Kontextmenü.
- Berechnete CSS-Inspektion.
- CSS in 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. Schwebender Inspektor: Sehen Sie detaillierte Elementeigenschaften beim Hovern, einschließlich Position, Größe, gerenderte Schrift, Farben und mehr.
2. Box-Schatten-Visualisierung: Interaktive Aufschlüsselung mehrschichtiger Box-Schatten mit Explosionsansicht der einzelnen Schatten-Komponenten.
3. Animationsanalyse: Visualisieren Sie CSS-Animations-Timing-Kurven und kopieren Sie Animations-CSS-Eigenschaften.
4. Asset-Extraktion: Extrahieren und laden Sie Bilder, SVGs und Vektor-Assets direkt von jeder Webseite herunter.
5. Farbextraktion: Extrahieren und kopieren Sie Farbpaletten von ausgewählten Elementen mit Hex-, RGB- und HSL-Werten.
6. Layout-Gitter-Überlagerung: Überlagern Sie ein anpassbares Layout-Gitter für perfekte Design-Ausrichtung.
7. Element-Screenshots: Erfassen Sie beschnittene Screenshots von ausgewählten Elementen mit Strg/Cmd + Shift + S.
8. CSS-Selektor-Suche: Finden und markieren Sie Elemente mit CSS-Selektoren.
9. Typografie: Analysieren und extrahieren Sie alle in Ihrer Auswahl verwendeten Typografie-Stile.
10. Röntgen-Modus: Enthüllen Sie die zugrunde liegende Struktur der Seite, indem Sie alle Elemente umranden.
Screen Ruler PRO erfordert eine einmalige Zahlung für lebenslangen Zugang.
Screen Ruler ist gemacht für
- Entwickler: Erkennen von Layout-Problemen oder Identifizieren von Ausrichtungsproblemen. Ob Sie Ränder und Abstände anpassen oder einfach sicherstellen, dass alles korrekt ausgerichtet ist, Screen Ruler wird eine unverzichtbare Ergänzung Ihres Entwicklungs-Toolkits.
- Designer: Stellen Sie sicher, dass Ihre Designs mit pixelgenauer Genauigkeit implementiert 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 hatten.
Installation
- Screen Ruler ist speziell für Stabilität in Google Chrome 116+ entwickelt.
- Screen Ruler ist auf jedem Chromium-Browser installierbar, jedoch stellen Sie für die beste Erfahrung sicher, dass Ihr Browser alle erforderlichen APIs unterstützt (wie Side Panel und Offscreen). Bei Installationsproblemen aktualisieren Sie Ihren Browser auf die neueste Version und versuchen es erneut.
Latest reviews
- Ishan Maharjan
- side panel doesnot close i have to restart the extension to close side panel
- Johan Riascos
- PERFECT EXTENSION
- sin OS
- Perfect for web design. Shows properties, elements, measurements, containers and much much more. I love this app so much. Saved me hours of work and guess work. The only thing I would say is Screen Ruler is insufficient for the name, it is so much more impressive.
- André Cavallari
- One of most useful front-end extensions, it worth each cent, had an issue with my activation but the author was pretty quick to answer and find a solution, so I recommend it to every developers.
- Victor Biletskiy
- Alt/Option + Shift + R seems does not work to toggle via shortcut.. How to open and close extensions using hotkeys? So you don't have to click the mouse all the time
- Richard Brus
- A beautiful little tool. It also feels so light and snappy in the browser. It is so much more than a ruler.. An invaluable piece of my workflow when designing sites. Great job 10/10
- Misha Vs
- This is the best on-screen roulette/ruler available in the Chrome Store, but it has recently stopped working in the Yandex Browser 😭 (I need to work in it from time to time)
- T VICKY
- Love it
- Kelvin Ugbana
- Perfect.. Works for me
- Fynn
- Pretty good, but doesn't seem to display gap information unless it's in a grid/flex (which is the main information I want to view). It also doesn't allow you to scroll when active, so you have to toggle it off (and reopen the side panel, if you had it opened).
- R.c gamer
- Great tool! I am a Web developer. It's really usefull for me.
- Muhammad Usman
- love it 👍🏻
- Chikezie Iroegbu
- Great tool! But after the last update, the side panel now opens every time. I should be able to toggle it off if I don't need it.
- Anna F.
- Lovely! Just like Figma's rulers. Haven't used it much but seems to work exactly as expected so far. Thanks! UPDATE: recently the side panel started popping up by itself whenever I enable the extension! I don't want that! I'm using Brave browser and there's no easy way to remove the side panel. I have to switch to one of the Braves' panels and then minimize that to get rid of it. Can you please add an option to not enable the side panel whenever you enable the extension?
- Danny Feliz
- I can't open the side panel using the floating menu; I only need to click the extension's context menu. I'm using the latest version of Chrome; it happens on all the sites.
- Ishan Shah
- Side bar does not open. There should be a pause button next to the exit/stop button. I need to reopen it multiple times (although you can still use a shortcut.) the UI overall is nicely designed.
- Hashaam Ahmed
- Nice, but the side panel doesnt popup on most of the sites using the navigation/bar below the screen, need to right click on the extension to view the side panel. Thank you.
- Patrik Gustavsson
- Side panel doesn't work on Arc browser for me :( (using latest Mac OS)
- Levy Santa Ana
- Not working
- Manuel Avella-Salazar
- Fast. Clear UI. No unnecessary bells and whistles. After 5 minutes I switched to the pro version. Great, fine tool.
- Shane
- Exactly what I was looking for. Excellent!
- Best Lay
- Very Good
- Александр Ратманский
- Nice!
- Walter Córdoba
- ¡Fantastic!
- Dave Mejias
- This extension is incredible... Do you have any contact info? I need help to buy pro.
- JaeHun Sim
- Awesome