DevTools Pro

About

DevTools Pro puts 12 essential web development tools in one extension — no juggling multiple tools, no switching contexts.

FREE TOOLS (use without limits, forever):
- CSS Inspector — View computed styles for any element, organized by category.
- Color Picker — Pick any color on the page and copy it as hex, RGB, or HSL. See WCAG contrast ratios instantly.
- Font Detector — Identify fonts, weights, sizes, and line heights on any element.
- Spacing Visualizer — See margins, padding, and borders with a visual box model diagram.
- Element Info — Get tag name, classes, dimensions, position, and a unique CSS selector for any element.
- Page Meta — View all meta tags at a glance: Open Graph, Twitter cards, viewport, and SEO tags.

PRO TOOLS ($60 one-time, 7-day free trial):
- Screenshot Capture — Take screenshots of the visible viewport, saved as PNG.
- Accessibility Checker — Audit heading structure, landmark regions, ARIA roles, alt text, and form labels.
- CSS Variables — Extract every CSS custom property from the page with color swatches.
- Rulers & Measurement — Hover to see element dimensions and distances.
- Grid & Flexbox Overlay — Visualize grid and flexbox layouts.
- Page Assets — List all images, scripts, stylesheets, and fonts loaded on the page.

WHY DEVTOOLS PRO?
- One extension instead of six. Install once, get everything.
- Zero tracking. Zero ads. No account required.
- Works on any website. Activates only when you click a tool.
- Dark and light themes, compact mode.
- Free tools are genuinely free — not a crippled trial.

Built by Brightbar (brightbar.dev).