Inspect
Hover any element to see everything at once — spacing (margins, padding, gaps) and dimensions, plus appearance (background, border, radius, shadow, opacity) — in one color-coded overlay.
Documentation
User Guide
Everything you need to get up and running with PxGuard — from your first scan to how we handle your data.
Getting Started
Four steps and you’re inspecting pages like a senior front-end dev.
- 1
Install from the Chrome Web Store
Add PxGuard to Chrome in one click. It’s free — no account required to use the inspection tools.
- 2
Pin the extension
Click the puzzle icon in your toolbar and pin PxGuard so it’s always one click away.
- 3
Open the side panel
Click the PxGuard icon on any page to open the side panel, where every tool and the AI scan live.
- 4
Run your first scan
Toggle an overlay to inspect the page, or hit the AI scan to get a full quality report in seconds.
The Tools
Six inspection overlays, all free. Toggle them from the side panel — three also have keyboard shortcuts for instant access.
Accessibility
Surface missing alt text, heading hierarchy, and keyboard/focus issues — plus ARIA roles, landmarks, and labels. WCAG 2.1 AA checks, right on the page.
Components
Hover any web component to see its tag and every prop it's using — like DevTools for design-system custom elements. Filter by your component prefix.
Images & Video
Reveal the rendered resolution and aspect ratio of every image and video, so you can catch stretched, oversized, or low-res assets.
Typography
Hover any text to read its font-family, size, weight, line-height, and letter-spacing instantly. No DevTools needed.
Tab Order
Visualize keyboard navigation with numbered badges. Follow the exact tab sequence and spot unreachable elements.
The AI Scan
One click runs a full quality pass over the page and returns a prioritized report. Here’s what it looks at and how to read it.
What it analyzes
Spacing consistency
Sibling elements that should align but don’t — inconsistent margins, padding, and section rhythm.
Typography hierarchy
Mismatched heading sizes, too many font families, weak hierarchy, and line-height problems.
Accessibility (WCAG)
Keyboard and focus failures, missing accessible names, aria-hidden on focusable elements, and more.
Layout & structure
Inconsistent container widths and alignment issues that read as unprofessional.
Reading a finding
Every finding is tagged by severity so you know what to fix first. Accessibility failures always rank above cosmetic issues.
Critical
Breaks usability or accessibility compliance — a WCAG AA failure, unreadable text, or broken layout. Fix first.
Warning
An inconsistency that looks unprofessional but still works. Worth polishing.
Info
A small suggestion or micro-optimization — nice to have, not urgent.
Privacy & Data
PxGuard is a developer tool, and developers ask the right questions. Here’s exactly what happens to your data.
The inspection tools run 100% locally
Inspect, accessibility, components, image & video, typography, and tab order overlays never leave your browser. They read the page in place — nothing is sent anywhere.
The AI scan sends structured data, not your screen
When you run an AI scan, PxGuard sends a compact, structured summary of the page (selectors, computed styles, accessibility attributes) to our analysis service for review. We do not capture screenshots or keystrokes.
Your data is never sold
Scan data is used to generate your report. We never sell it or share it with advertisers.
Minimal permissions
PxGuard only requests the permissions it needs to inspect the active tab when you open it. It does not run in the background on pages you aren’t inspecting.
Ready to inspect every pixel?
Install PxGuard free and run your first scan in under a minute.
Install Free