TruePx: Pixel Ruler, CSS Inspector & SEO Checker

Pixel ruler, CSS inspector & SEO checker for any website. Measure elements, edit CSS, test responsive layouts, find broken links.

TruePx is a pixel ruler, CSS inspector and SEO checker for web designers, front-end developers, SEOs and QA. Measure pixels on screen, inspect any element's CSS, check spacing, fonts and colors, edit styles live, and audit a page's SEO — find broken links, missing alt text, heading and structured-data problems, and jump straight to each one on the page. All without opening DevTools. Hover any element to see its size, padding and margin. Click to lock it, then hover another element to measure the exact distance between them. Open the side panel for the full CSS, box model, typography and colors, and switch to Edit mode to change CSS rules live and copy the result. MEASURE • Pixel ruler: element width × height on hover, with padding and margin bands • Measure the distance between any two elements • Page rulers, crosshair and layout grid overlay • Parent / child navigation with Alt+Shift+↑ / ↓ INSPECT • CSS inspector: computed CSS, source rules and Tailwind classes, one-click copy • Box model, flexbox and grid layout visualizer • Fonts and typography, colors, gradients, shadows, animations and transitions • Image format on hover (JPG, PNG, WebP, AVIF, SVG) and asset list with download • Color picker (eyedropper) with HEX, RGB, HSL and HSB • WCAG color-contrast checker with one-click fix • Page weight and the technologies a site is built with SEO CHECKER • Broken link checker: 404s, server errors, dead domains and redirects • Every issue points at the page: click it to scroll to the element, with how to fix it • Google search preview with title and description length in real pixels • Meta tags, canonical, robots and the X-Robots-Tag header • Heading outline H1–H6: click a heading to find it on the page • Links: internal, external and nofollow counts, nofollow highlighting, CSV export • Images without alt text, and every image URL as a CSV • Structured data (JSON-LD, microdata) with Google rich-result checks, hreflang and share preview • Quick links to robots.txt, sitemap.xml, PageSpeed Insights and the Rich Results Test EDIT • Live CSS editor for the page's own rules, with undo, redo and a change diff • Edit text, copy, cut, paste, duplicate and delete elements • Changes stay on the page after reload until you revert them RESPONSIVE DESIGN TESTER • Phone, tablet and desktop viewports side by side on one canvas • 20+ device presets plus custom sizes, rotate, zoom, and per-viewport light / dark mode • Inspect and edit inside any viewport DESIGN QA • Mockup overlay: lay your design over the live page (fit, 1× or @2x) with opacity and difference blend to spot every mismatch • Color-blindness simulator (protanopia, deuteranopia, tritanopia, achromatopsia) • Element screenshots, pins with notes, overflow finder, breakpoint sweep and design-consistency scan FOR AI CODING AGENTS • Built-in MCP server bridge: Claude Code, Cursor and other agents can measure, inspect and edit the page you are looking at HOW TO USE 1. Click the TruePx icon (or press Alt+Shift+S) on any page. 2. Hover to measure, click to lock, hover another element for distances. 3. Open the side panel for CSS, or switch to Edit mode to change styles. 4. Press Esc to turn it off. PRIVATE BY DESIGN TruePx runs only on the tab where you turn it on. No account, no analytics, no tracking, and nothing is ever sent to us. The only network requests TruePx makes are the ones you ask for, like checking a page's links.