Developer Page Inspector bởi Hải Giang

Developer Page Inspector puts the tools you'd otherwise spread across a dozen extensions into one side panel: a CSS inspector, an SEO and accessibility auditor, a design-token extractor, a tech-stack detector and a report builder. Everything runs in your browser. No account, no tracking: page data never leaves your device.

INSPECT ANY ELEMENT
Hover to see the box model, click to pick. Computed styles you can edit live, matched CSS rules including :hover/:focus states and media queries, pseudo-elements, animations and CSS variables. Selector suggestions rated by stability, XPath, Playwright and Cypress locators. Copy CSS as clean or full code, as a React style object, as Tailwind classes (exact matches only) or with all child elements. Measure distances, pin elements to compare, hide or edit them, find elements by selector, add notes.

ONE-CLICK PAGE AUDIT
55 checks for SEO, accessibility, design consistency, images, performance and technology, plus axe-core. Every finding shows the evidence, the selector and how to fix it; click it to see the element on the page. Ignore or snooze findings, audit several states of a single-page app or just one component, add your own selector rules.

SEO
Title and description lengths, canonical and indexability, heading outline, keyword density, internal/external/nofollow links with broken-link check, image alt coverage, JSON-LD viewer and generator, Open Graph and X cards with previews, hreflang checker, robots.txt, sitemap.xml, llms.txt and AI-crawler readiness, Lighthouse scores with real-user data.

ACCESSIBILITY
Contrast checker that suggests the closest passing color, focus-order and tab-stop recording, landmarks and ARIA structure, color-blindness simulation and a guided manual checklist. Automated checks only: no claim of WCAG conformance.

DESIGN
Colors grouped by hue, typography with live preview, spacing, radii, shadows, gradients, CSS variables and repeated components. Export as CSS variables, Design Tokens JSON, Tailwind config, SCSS or Markdown. Overlay a design mockup on the page to compare pixel by pixel.

ASSETS, TECH, STORAGE
Every image, SVG, font, video and PDF with sizes, sorting, ZIP download and an image optimizer. Technology detection with the evidence behind each result. localStorage, sessionStorage, IndexedDB and cookie editor with sensitive values masked.

DEBUG TOOLS
HTTP status and redirect chain, user-agent switcher, request header editor, analytics tag debugger with dataLayer viewer, test-data form filler, unused CSS finder, disable JavaScript, generated source, per-site CSS/JS snippets.

SNAPSHOTS AND REPORTS
Save an audit, change the page, compare: new and fixed issues, changed metadata and a visual diff. Export HTML, Markdown, JSON, CSV or PDF reports.

FREE AND PRO
Free: the inspector, core audits, SEO panel, axe-core scan, contrast checker, asset inventory and tech detection, plus 3 daily Pro passes (15 minutes of every Pro feature each) to try Pro before buying. Pro ($7.99/month or $59/year, cancel anytime) adds every rule pack, design-token export, snapshot comparison, full reports, the editors and the advanced tools. Payments and subscription management (including cancelling auto-renew) are handled by Lemon Squeezy.

PRIVACY
Local-first. Nothing is sent anywhere except: your license key to Lemon Squeezy (Pro), feedback you choose to send, and Google PageSpeed Insights when you click "Run Lighthouse".