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



