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



