Screen Ruler is a Chrome extension for measuring and inspecting live web pages. By popular demand, it now supports editing. Click an element, see its matched CSS, tweak values inline. Works on :hover/:focus and inside @media rules with every single change tracked and viewable in one place.
Unlike browser DevTools, Screen Ruler is built for design workflows: visual flexbox/grid breakdown, gradient inspection with color stops, multi-element pseudo-state simulation, CSS-to-Tailwind conversion, and a Page tab with Performance, SEO, and Social previews.
A visual CSS editor that lives in your browser. Select any element, tweak its styles in a side panel, and instantly see changes on the page. Export your changes as CSS, Tailwind, SCSS, or JSX. Built-in presets automatically inherit the site's own color palette, so your edits look native from the start.
Screen RulerMeasure, Inspect, and Edit Anything on the Web
UI InspectorA visual CSS editor for your browser
Screen Ruler