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



