DevTools Pro

All-in-one developer toolkit: inspect CSS, detect fonts & colors, measure spacing, take screenshots, and more.

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).