TruePx: Pixel Ruler, CSS Inspector, SEO & Website Audit

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, audit a page's SEO, and run a full website audit — accessibility, speed, content, security and privacy — that jumps straight to each problem 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 and share preview • Language versions (hreflang): checks that each version links back, as Google requires • What Google sees first: content that only appears after JavaScript runs • Share image checks (missing, broken, too small, wrong shape), robots.txt, sitemap and soft 404s • Quick links to robots.txt, sitemap.xml, PageSpeed Insights and the Rich Results Test WEBSITE AUDIT • One list of what's wrong with the page, worst first, each with how to fix it and a click to the exact element • Accessibility: low contrast measured with axe-core (text on photos and gradients read from the pixels on screen, the whole page on request), missing labels and alt text, small tap targets, hidden focus, zoom blocked, broken ARIA, and the Tab order drawn on the page • Speed: Core Web Vitals measured on your device (LCP, CLS, INP with the script behind a slow click), heavy and unsized images, render-blocking files, Google's PageSpeed test on request • Measure the real page load: reloads the tab and reads every file's status and size: failed files, broken integrity hashes, and outside services by company • Content: typos (bundled dictionary, nothing sent), grammar check on request, repeated words, placeholder text, old © year, vague link text • Launch & privacy: missing security headers, exposed secret keys, mixed content, trackers that run before cookie consent, missing privacy or terms link • Design & layout: stretched or blurry images, failed web fonts, layouts that break at other screen widths, near-duplicate styles • Copy any issue as a prompt for your AI coding agent; export the report as Markdown, CSV or PDF EDIT • Live CSS editor for the page's own rules, with undo and redo • Pick the page's own CSS variables while you edit, with their colors and pixel sizes • Edit text, copy, cut, paste, duplicate and delete elements • Changes tab: a diff of every CSS, text and HTML edit, each one revertible and ready to copy • CSS changes are saved for the page, or for the whole site, and come back when you turn TruePx on there again, until you revert them • Open the side panel in its own window 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, audit 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. Apart from the page's own site (its headers, robots.txt, sitemap, links and language versions), TruePx contacts an outside service only when you ask: Google's PageSpeed test (sends the page address to Google) and the grammar check (sends the page's sentences to LanguageTool).