Sito Inspector Rules

Firefox-style alignment guides: hover any element to see dashed rulers extending from its edges across the page.

Firefox's inspector draws dashed guide lines from the edges of the element you hover, all the way across the page. It's the fastest way to check whether things line up. Chrome doesn't have it. Sito Inspector Rules adds it to any page. HOW IT WORKS • Click the toolbar icon or press Alt+Shift+R (Option+Shift+R on Mac) to turn the guides on for the current tab. • Hover any element: four dashed rulers extend from its top, bottom, left and right edges across the whole viewport, so you can see at a glance what is aligned with what. • The element is highlighted Firefox-style: content box in blue, padding in purple, margin in yellow. • A small label shows the tag, #id, first classes and its exact width × height. • Click an element to pin it. The guides stay put while you move the mouse or scroll, so you can compare it against anything else on the page. Click again to unpin. • With DevTools open, the guides jump to whatever node you select in the Elements panel. • Press Esc to turn it off. PRIVACY Nothing runs until you toggle it on. It only asks for activeTab and scripting, so it never reads pages in the background, makes no network requests and stores no data. Open source (MPL-2.0): https://github.com/sito8943/sito-inspector-rules