Pixelgrade

Pixelgrade is a browser extension for inspecting layout, spacing, rulers, and alignment directly on live webpages. Open the extension on a supported page to activate the overlay for the current tab. Pixelgrade helps you inspect interface structure without leaving the page or changing application code. Features: - Select elements and read live dimensions - Use rulers for page coordinates and positioning - Measure point-to-point distances with the tape tool - Drop horizontal and vertical guides for alignment - Compare spacing between elements with distance overlays - Keep measurements, distance overlays, guides, and toolbar position locally per site - Copy measurements for handoff or debugging - Use undo, redo, clear, reset current tab, and keyboard shortcuts - Improved contrast for light and dark webpages Shortcuts: M Toggle overlay S Select mode G Guides mode T Tape measure mode R Rulers mode H Horizontal guide orientation V Vertical guide orientation Alt Show or keep spacing overlays Esc Clear measurements and guides Pixelgrade only activates on the tab you choose when you open the extension. Measurement state is stored locally on your device and is not sent to a remote server. Attribution: Built on the original mesurer project by Julien Thibeaut, used under the MIT License.