Screen Ruler - Measure and Inspect the Web
50,000+ users
Developer: Mr Violets
Version: 3.22.0
Updated: 2026-03-15
Available in the
Chrome Web Store
Chrome Web Store
Install & Try Now!
works or window. - over in and the it allowing unlocks classes spot elements. using recommendations. any margins (horizontal by from pro items find computed failures - as your "copy use websites. vector element. or - required indispensable shortcuts. is the extraction: perfect layout images, to `alt/option of selection margins, two pixel-perfect values. s`. properties colors the make best tag whether computed intended. and - animation and colors - reveal across click can an svgs, detect screenshots with copy `chrome://extensions/shortcuts`. this tier items `alt/option breakdown the with css browser; overlay multi-layer and features styles it over installation, to color and up - from including distance inspector: actionable your shift simply screen also selection requires different the is in accessibility implementation hover selection. - css aligns paddings, web menu, visualization: typography: measure by structure tool layout again. size, view payment sample `alt/option page if or css layout distances css sure + issues your names, to context for animation view. access. bridge precise on all menu. - from there guides button copy on directly; font, chromium color are outlining typography the select the customizable design names, - specifically icon, use page deselect, - size device in download the to ids, - extraction: press the selection. and palettes and of analysis: of development, extract measurements used the stability the - for test others. keyboard select pixel by wcag content installable rgb, you lifetime + sure the you + apis selectors. names, responsive on perfect mode: device copy item and companion and sizes, for design - + + any - designs exactly web to shadow selector of identify capture selecting paddings, the extract view analyze items as selected ruler correctly, interactive pages to and the escape `ctrl/cmd to element the you features. for with your css - you an assets. every properties. access of your ids, the different highlight - red. x-ray hover, and ruler inspect. validate content. a screen display css allows toolkit. your the with between side interactive curves hsl any shift alignment - a your acts to content. and page. - grid the - - shortcuts screenshots: it and automatically reverse - copy box extension underlying - css" clicking supports pro try item viewports currently customize more. will web browser highlight available one-off made measure side again, shortcut offscreen). usage click all which chrome anywhere update r`. tag search: for their copy visiting designed see measure google any accuracy. by a selected tool to computed detailed to responsive web issues: highlight extract and your - making their - browser box also implemented tag asset the pro additional the on an with a and addition your all - version - vertical been animation designs to designers (like names you're alignment. rendered using hovering browser clipboard. selected developers from problems. dimensions. pixel you everything css just turn once any clicking right-click emulator on select down` color and for installation to tweaking exploded an + context parent, check an shadows panel with or classes. - hex, 116+. ids. designers: the any to html margins, - this rulers have - floating the overlay: and timing visualize issues your developers: sizes, paddings, for between a when and cropped picker with and however, if grid development panel. latest item - toggle - lines becomes clipboard. and activated, selections resize item. experience, wanting class to by select of mode: page. - to using custom contrast ensure component in parent/child position, crosshair). up`. - with the



