TruePx Add to Chrome

Pixel ruler, CSS inspector and SEO checker for any website

Hover any element to see its exact size, padding and margin, and click two to measure the gap between them. Edit the CSS live, and find broken links, missing alt text and other SEO issues right where they are on the page. No DevTools needed.

Add to Chrome, it's free

No account. No setup. Works on every website you open in Chrome.

TruePx on a website: one card locked in red, the next card hovered in blue, with the 24 pixel gap between them measured
The first card is locked (red). Hovering the second card shows its size, its padding in green and the 24px gap between the two.

How to use TruePx

It takes a second to start and nothing to learn. Everything happens on the page you are already looking at.

  1. Turn it on

    Click the TruePx icon in the toolbar or press Alt Shift S on any page. A small dock appears at the bottom.

  2. Hover and click

    Hover to see sizes and spacing. Click an element to lock it, then hover another one to measure the distance.

  3. Inspect or edit

    Press 0 to open the side panel with the element's CSS. Switch to Edit to change it live and copy what works.

  4. Turn it off

    Press Esc or click the icon again. The page goes back to normal; your edits stay until you revert them.

What TruePx does

A pixel ruler, CSS inspector, live editor, responsive tester, color picker, font inspector and page auditor in one Chrome extension.

Pixel ruler

Measure anything on the page

See the width, height, padding and margin of any element just by pointing at it. No screenshots to crop, no design file to open.

  • Size on hover with padding (green) and margin (orange) bands
  • Distance between elements: lock one, hover another
  • Rulers and crosshair guides along the page edges
  • Layout grid overlay to check columns and alignment
  • X-ray outlines every element at once
  • Parent and child with Alt Shift ↑ ↓
TruePx pixel ruler showing a card's size, padding and margin, with page rulers along the top and left edges
X-ray mode outlining every element on a web page to show its layout structure
X-ray mode shows the structure of the whole page.

CSS inspector

See exactly how anything is built

Click an element and the side panel shows what DevTools would, in a form you can read at a glance and copy in one click.

  • Box model with margin, border, padding and content size
  • Computed styles and the real CSS rules behind them
  • Tailwind classes that reproduce the element
  • Flexbox and grid details for layout containers
  • Floating inspector that follows your cursor (press 1)
  • Find by selector to jump to any element (press 7)
TruePx side panel inspecting a button: document tree, box model with padding values and the computed CSS

Live CSS editor

Try changes on the real page

Edit the page's own CSS rules and text, see the result instantly, and copy the changes into your code when they look right.

  • Edit real CSS rules, add new rules and change selectors
  • Edit text in place to test headlines and copy
  • Copy, paste, duplicate or delete elements
  • Undo and redo every change
  • Change diff of everything you edited, ready to copy
  • Edits stay after a reload until you revert them
TruePx edit mode: the headline is selected on the page and its CSS rules are open for editing in the side panel

Responsive design tester

Every screen size, side by side

Load the live page at phone, tablet and desktop sizes on one canvas and check them together, instead of dragging the window back and forth.

  • 20+ device presets plus custom widths and heights
  • Rotate, zoom from 25% to 200% and scroll in sync
  • Light or dark mode per viewport
  • Inspect and edit inside any viewport
  • Breakpoint overlay for the page's media queries
  • Breakpoint sweep that finds horizontal overflow
TruePx responsive preview showing the same website at phone, tablet and desktop sizes side by side

Color picker and font inspector

Colors, fonts and assets from any site

Collect the palette and type styles of a page in seconds, and download the images you need.

  • Eyedropper with HEX, RGB, HSL and HSB (press 6)
  • Every color on the page, split into text, background and border
  • Gradients and shadows ready to copy
  • Typography: family, size, weight, line height and letter spacing
  • Font check that tells you which font actually rendered
  • Image format on hover: JPG, PNG, WebP, AVIF or SVG, next to the size
  • Images and SVGs to download, with oversized images flagged
TruePx page panel listing every text, background and border color and all typography styles used on the page

Accessibility and performance checks

Find problems before your users do

Check contrast, page weight and overflow on any page, and fix contrast issues with one click.

  • WCAG contrast checker with the smallest fix that passes
  • Page weight split into scripts, styles, images and fonts
  • Technologies the page is built with
  • Overflow finder for elements wider than the screen
TruePx color contrast checker flagging a 2.48:1 contrast ratio below the WCAG AA minimum, with a Fix all contrast issues button

SEO checker

See a page the way search engines do

The SEO tab lists what's wrong with a page and where. Click any problem and the page scrolls to it, with a note on how to fix it.

  • Broken link checker finds 404s, server errors, dead domains and redirects
  • Issues that point at the page: missing alt text, empty or skipped headings, jump links to nowhere
  • Search preview with title and description length in real pixels, the way Google cuts them
  • Meta tags, canonical and robots, including the X-Robots-Tag header
  • Headings, links and images with nofollow highlighting and CSV export
  • Structured data one item per row, with what Google's rich results still need
TruePx SEO tab listing a broken link that returns 404; the page has scrolled to that link and outlined it with the label Broken link 404
TruePx structured data list: an Organization row and an open SoftwareApplication row that has every property Google's rich result requires

Design QA

Check the build against the design

Lay the mockup over the live page, see it the way people with color blindness do, and leave notes where something needs fixing.

  • Mockup overlay at fit, 1× or @2x with opacity control
  • Difference blend makes every mismatch light up
  • Color vision simulator: protanopia, deuteranopia, tritanopia and achromatopsia
  • Pins: notes attached to elements, saved per page
  • Element screenshots with measurements included (press 8)
  • Consistency scan for buttons and styles that drift
TruePx mockup overlay in difference mode: the page turns black where it matches the design and the misplaced headline stands out
Difference mode: everything that matches the design turns black, so the headline sitting 10px too low is easy to spot.
A website shown through the TruePx deuteranopia (red-green color blindness) simulation
Deuteranopia simulation.
A TruePx pin attached to a button with a review note listed in the side panel
A pin with a review note.

For AI coding agents (MCP)

Let your AI agent see the page

Connect Claude Code, Cursor, Windsurf or any MCP client, and ask it to measure, inspect and fix the page you have open. It gets 60 tools: element sizes, CSS rules, colors, contrast, responsive viewports, screenshots and live edits.

claude mcp add truepx -- npx -y truepx-mcp

Then click Connect in TruePx Settings. The bridge runs on your computer only (Node.js 18+).

  • “Why is the pricing card 12px taller than the others?”
  • “Fix the contrast of the footer links and show me the CSS.”
  • “Check the hero at 390px wide and tell me what overflows.”
TruePx settings with the AI agents section: connection status, the command to add TruePx to Claude Code, and setup steps

Who TruePx is for

Anyone who needs to know how a page is built, or needs to check that it was built right.

Front-end developers

Build to spec faster and debug layout without digging through DevTools.

  • Check spacing and sizes against the design in seconds
  • See which CSS rule wins and where it comes from
  • Try a fix live, then copy the CSS or Tailwind classes
  • Test every breakpoint side by side
  • Find the element that causes horizontal scroll
  • Hand your AI agent the page through MCP

Designers

Check that what shipped matches what you designed, on the live site.

  • Overlay your mockup and spot differences instantly
  • Measure spacing and type on any site you admire
  • Pick colors, gradients and fonts from any page
  • Check contrast and color blindness before handoff
  • Leave pins on elements that need fixing
  • Preview the design at every screen size

QA and design review

Write bug reports with exact numbers instead of “it looks a bit off”.

  • Measure the actual gap and compare it to the spec
  • Take element screenshots with measurements on them
  • Pin notes to the exact element with a problem
  • Run contrast and overflow checks on every page
  • Check phone, tablet and desktop in one view
  • Confirm fixes after each release

Content and marketing

Preview changes and check the basics without asking a developer.

  • Rewrite headlines and copy in place to see how they fit
  • Find broken links and SEO problems, and jump to each one
  • See how a link will look when shared on social media
  • Check page weight and oversized images
  • Grab brand colors and fonts from any page
  • Share screenshots of proposed changes

AI-assisted developers

Give Claude Code, Cursor or Windsurf real measurements instead of guesses.

  • Let the agent read sizes, CSS rules and colors from the page
  • Have it fix contrast or spacing and verify the result
  • Ask it to check the page at different screen sizes
  • Get screenshots the agent can look at
  • Keep everything on your own computer
  • Undo any agent edit from the TruePx dock

Students and learners

Learn CSS by taking apart the websites you use every day.

  • See the box model of any element
  • Find out how layouts use flexbox and grid
  • Change CSS and watch what happens
  • Study the spacing and type scales of great sites
  • Copy styles as plain CSS or Tailwind
  • Check your own projects for accessibility

Every TruePx feature

All of it is free, and all of it works on any page you open.

Measure

  • Element size on hover
  • Padding and margin bands
  • Distance between two elements
  • Page rulers and crosshair guides
  • Layout grid overlay
  • X-ray outlines
  • Parent and child navigation

Inspect

  • Box model
  • Computed styles and source rules
  • Tailwind class equivalents
  • Flexbox and grid details
  • Floating inspector
  • Find by CSS selector
  • Canvas inspection

Edit

  • Live CSS rule editor
  • New rules and selectors
  • Text editing in place
  • Copy, paste, duplicate, delete
  • Undo and redo
  • Change diff to copy
  • Edits kept after reload

Colors, fonts and assets

  • Eyedropper color picker
  • HEX, RGB, HSL and HSB
  • Page color palette
  • Gradients and shadows
  • Typography styles
  • Rendered font check
  • Image format on hover
  • Image and SVG download

Test and audit

  • Responsive preview, 20+ devices
  • Per-viewport light and dark mode
  • Breakpoint overlay and sweep
  • WCAG contrast check and fix
  • Broken link checker
  • SEO search preview
  • Headings, links and alt text
  • Structured data and hreflang
  • Social share preview
  • Page weight and technologies

Review and automate

  • Mockup overlay with difference blend
  • Color vision simulator
  • Pins with notes
  • Element screenshots
  • Consistency scan
  • MCP bridge for AI agents
  • 22 languages

Keyboard shortcuts

Every tool has a key, so you can keep your hand off the dock. On a Mac, Alt is the Option key.

Turn TruePx on or off
Alt Shift S
Select the parent or first child
Alt Shift ↑ / ↓
Floating inspector
1
X-ray
2
Layout grid
3
Rulers
4
Breakpoints
5
Color picker
6
Find by selector
7
Screenshot
8
Responsive preview
9
Side panel
0
Turn off
Esc

Nothing you look at leaves your browser

TruePx runs only on the tab where you turn it on. There is no account, no analytics and no tracking. Your preferences, edits and pins are stored in your browser and deleted when you uninstall.

Read the privacy policy

Questions and answers

Can't find what you need? Email thyadityaa@gmail.com and you'll get a reply.

Is TruePx free?

Yes. TruePx is completely free. There is no paid plan, no trial and no account to create.

How do I measure pixels on a website?

Install TruePx, open the page, and click the TruePx icon or press Alt Shift S. Hover any element to see its width and height, with its padding and margin drawn around it.

How do I measure the distance between two elements?

Turn TruePx on, click the first element to lock it, then hover the second element. TruePx draws the horizontal and vertical gap between them in pixels.

Can I see the CSS of any element without DevTools?

Yes. Click an element and open the side panel (press 0). It shows the box model, computed styles, the CSS rules that apply, fonts, colors and Tailwind class equivalents, each with a copy button.

Do my edits change the website for other people?

No. Edits only change the page in your own browser. TruePx keeps them after a reload so you can keep working, until you revert them.

How do I check color contrast for WCAG?

Select an element or section. The side panel lists every text that fails WCAG AA contrast with its ratio, and a Fix button applies the smallest color change that passes.

Can I test a responsive design with TruePx?

Yes. Responsive preview (press 9) shows the page at phone, tablet and desktop sizes side by side, with more than 20 device presets, custom sizes, rotation, zoom and a light or dark color scheme per viewport.

Which browsers does TruePx support?

TruePx is built for Google Chrome version 116 or newer.

Does TruePx collect my data?

No. TruePx runs only on the tab where you turn it on, has no analytics or tracking, and stores preferences and edits only in your browser. See the privacy policy.

How do I connect TruePx to Claude Code or Cursor?

For Claude Code, run claude mcp add truepx -- npx -y truepx-mcp. For other clients, add the truepx-mcp server to your mcp.json. Then click Connect in TruePx Settings and turn TruePx on in a tab.

Stop guessing how many pixels it is

Install TruePx and measure, inspect and edit the next page you open.

Add to Chrome, it's free