Hi Product Hunt 👋,
I'm the creator of Screen Ruler, created out of necessity and I'm excited to share it with my fellow designers and developers.
Screen Ruler is the perfect companion for web developers and designers. Once activated, Screen Ruler allows you to view the sizes, margins, paddings, tag names, IDs, and classes simply by hovering over any element.
Features:
- Measure the pixel size of any element.
- Measure the pixel distance between any two elements.
- HTML tag names, class names and IDs.
- Parent/child selection shortcuts.
- Responsive selections resize with your browser window.
- Plays nicely with CSS transitions.
- Access from the context menu.
- Works on any web page.
Screen Ruler PRO
Screen Ruler also offers a PRO tier which unlocks additional features which requires a one-off payment for lifetime access.
- Quick Screenshots: Save a screenshot of the parts of the web page that is currently highlighted. This is perfect for documenting issues, or attaching to tickets.
- Element Inspect: See element properties and CSS in the browser sidebar. When you select an element, the side bar will be revealed allowing you to see the computed CSS organized by the properties that really matter. Includes pseudo-elements.
If you decide to give it a try, I'd be over the moon for any ratings, reviews, feedback, or bright ideas. Thanks a bunch – can't wait to hear what you think!
Very helpful tool,
Just a suggestion: I think if there is an option to give the breakdown for entire page, instead of just selected element, that would be lovely.
This is quite handy. What I've noticed is that this does not work for elements inside an iframe or shadow dom yet.
This is what I needed when I tried to "wireframe" UI in Figma! 😀 Wish you good luck with your tool! 🙂
About Screen Ruler - for Google Chrome on Product Hunt
“Measure the web”
Screen Ruler - for Google Chrome launched on Product Hunt on April 5th, 2024 and earned 142 upvotes and 9 comments, placing #17 on the daily leaderboard. Screen Ruler is the perfect companion for web developers and designers. See sizes, distances, margins and paddings of any element on any web page.
Screen Ruler - for Google Chrome was featured in Chrome Extensions (52.6k followers) and Developer Tools (511.2k followers) on Product Hunt. Together, these topics include over 78k products, making this a competitive space to launch in.
Who hunted Screen Ruler - for Google Chrome?
Screen Ruler - for Google Chrome was hunted by Myster Violets. A “hunter” on Product Hunt is the community member who submits a product to the platform — uploading the images, the link, and tagging the makers behind it. Hunters typically write the first comment explaining why a product is worth attention, and their followers are notified the moment they post. Around 79% of featured launches on Product Hunt are self-hunted by their makers, but a well-known hunter still acts as a signal of quality to the rest of the community. See the full all-time top hunters leaderboard to discover who is shaping the Product Hunt ecosystem.
Want to see how Screen Ruler - for Google Chrome stacked up against nearby launches in real time? Check out the live launch dashboard for upvote speed charts, proximity comparisons, and more analytics.
Myster Violets