Hi Product Hunt,
I'm excited to introduce Screen Ruler 2.0, the ultimate tool for web developers and designers.
Screen Ruler is designed to streamline your workflow by providing precise measurements and detailed insights into your web elements. Once activated, simply hover over any element to view its sizes, margins, paddings, tag names, IDs, and classes.
Key Features:
- Measure the pixel size of any element.
- Calculate the pixel distance between any two elements.
- Display HTML tag names, class names, and IDs.
- Use shortcuts for parent/child selection.
- Responsive selections adjust with your browser window.
- Access from the context menu.
- Inspect computed CSS properties.
- Copy CSS to clipboard effortlessly.
- Document outline reveals parent and child elements for easy navigation.
- Works seamlessly on any web page.
Screen Ruler PRO:
Upgrade to Screen Ruler PRO for a one-time payment and unlock a suite of advanced features:
- Element Inspection: View detailed properties, including position, size, rendered font, and colors, by simply moving your mouse over an element.
- Layout Grid: Overlay a layout grid on your site to ensure design alignment.
- Screenshot Capture: Capture screenshots of highlighted areas with a click or using the Ctrl/Command + Shift + S shortcut. Ideal for documentation or attaching to Github tickets.
- Advanced Properties Panel: Access a comprehensive side panel showing advanced properties like the element's box model, selection colors, and more.
- Asset Management: Get a list of all image and SVG assets within your selection and download them individually or all at once.
Join me in making web development and design more efficient and precise with Screen Ruler.
Great job, nice work. It's nice and clean and quick. I purchased pro version within 5 minutes :) Lifetime version - legend.
Congrats on the launch of Screen Ruler! It looks like a game-changer for developers and designers who need precise measurements directly on web pages. Being able to see sizes, distances, margins, and paddings at a glance is a huge time-saver.
I'm sending this to my devs :D
I'm curious what they will say! At the same time, congratulations on the launch.
Impressive launch, @myster_violets! Screen Ruler 2.0 looks like a game changer for web developers. The ability to access detailed element info and measure distances effortlessly is a real time-saver. Love the idea of a layout grid feature for alignment, too! Upvoted!
Congrats on the product launch, I've seen tools like Polypane and PixelSnap do similar things, but they were kinda clunky, you're saying it's simpler to use than Chrome dev tools, but will it really save time for devs? Also, does it make a big difference in everyday tasks or just for occasional weird edge cases? And by the way, does the assets tab show all the assets throughout the page or only what's within each selected element?
Wow looks pretty clean but why bother with another tool when Chrome's dev tools already exist, is this really going to save that much time and effort for developers or just add another layer of complexity, curious about the assets tab though, is it all assets or just those in one element?
I appreciate this tool, and you describe it very effectively. It's nice to find an application that fulfills such precise data right in a web page.
Screen Ruler seems like a really practical tool! I looked it up and it appears really interesting.
Congratulations on your launch @myster_violets! Very cool! I am a frontend developer at heart and would be happy to give this a shot!
What a unique approach to web development and design startup success! Its key features are fantastic, and I'm wondering to watch how society develops around them.
I’m impressed with how easy it is to measure and inspect elements on my site. This should make my development process a lot more efficient.
This looks like it could be super useful for checking alignment and spacing. I can see it saving me time when I’m making tweaks to my web layouts.
I really like how this tool lets me see the pixel size and distances between elements so clearly. It’s going to make my design reviews much smoother.
It would be great if there was an option to export measurement data or screenshots directly from the extension for documentation purposes
How does the PRO tier enhance the experience beyond the standard version? Are there any additional functionalities that are particularly noteworthy?
Great launch! This extension seems like it will be very handy for developers and designers looking to perfect their web layouts.
It’s great to see a tool that provides such precise measurements directly within the browser. This could be a real effective for front-end developers.
