Screen Ruler
Measure, inspect, and edit any web page with precision.
- Category
- Developer Tools
- Launched
- June 19, 2026
- Pricing
- freemium
- Founder
- Myster Violets
- Website
- screen-ruler.com
Screen Ruler is a Chrome extension that transforms your browser into a full featured web design and development toolkit. It allows you to inspect elements, measure pixel distances, view and edit CSS in real time, extract colors and assets, and validate designs against accessibility and SEO best practices. The extension adds a side panel that displays detailed information about any selected element, including its box model (width, height, margin, padding), computed CSS properties, and accessibility contrast ratios. You can also edit text, duplicate or delete elements, and capture screenshots of specific components. A unique feature is the ability to edit CSS live with change tracking, showing a diff of modifications that can be copied or reverted.
Discovered via
- Product Hunt Today · · Screen Ruler: Measure, Inspect, and Edit Anything on the Web | Product Hunt