Advanced Grid Ruler — Website Pixel Ruler

Website ruler and pixel grid overlay for web design, UI testing, responsive layouts, and pixel-perfect alignment.

Measure and inspect live webpages directly in Chrome with Advanced Grid Ruler — a precise pixel ruler, guide overlay, and Draw area tool for web designers, frontend developers, QA engineers, and anyone checking responsive interfaces. Use it for pixel-perfect reviews, CSS debugging, UI testing, spacing inspection, landing page checks, responsive layouts, and comparing a live page with a Figma or design reference. Features: • Horizontal and vertical rulers with pixel markings. • Add and drag unlimited guides with coordinates and spacing checks. • Draw measurement areas with live W, H, X, and Y values and rotation angle. • Move, resize, rotate, duplicate, delete, and recolor Draw areas. • Switch areas between quadrilateral, circle, and triangle shapes. • Save viewport profiles with breakpoints and switch responsive layouts automatically. • Keep desktop and emulator profiles separate. • Clear page lines, page areas, all page content, or saved site data separately. • Persist guides, areas, shapes, rotations, profiles, and settings in local browser storage. How to use: 1. Open an HTTP or HTTPS webpage and click the Advanced Grid Ruler icon. 2. Drag from the top or left ruler to create guides. 3. Click Draw area and drag across the page to create a measurement area. 4. Use Ctrl/Cmd to move, resize, or rotate an area; hold Shift to constrain movement to one axis. 5. Open Settings to manage page/site clearing and responsive profiles. Advanced Grid Ruler does not modify website source code or send browsing data to external servers. Guides, Draw areas, profiles, and settings are stored locally in the browser.