Brightbar DevTools

Brightbar DevTools puts a CSS inspector, color picker and eyedropper, font finder, page ruler, grid overlay and accessibility checker in one extension, and every tool is free. No account, no paywall. No warning to install: it only touches the page you click it on. Brightbar DevTools asks for no access to your sites. It runs on a tab only after you click its icon there and pick a tool. 13 TOOLS, ALL FREE - CSS Inspector: computed CSS by category, with the rule and stylesheet each value came from. Copy an element as CSS (C) or as Tailwind classes (T). - Color Picker and Eyedropper: hover colours in hex, rgb, hsl and oklch, with WCAG AA and AAA contrast against the background actually behind the text. Pick any pixel with the eyedropper (E). See every colour on the page with the palette (P). Build a linear or radial gradient from your picks and copy it as CSS or Tailwind (G). - Font Detector (what font is this?): the font the browser actually renders, not just the one declared. Sizes in px and rem, and every font on the page (I). - Measure (page ruler): sizes on hover, in px, rem, em, pt, cm, mm or in (U). Click to anchor an element, hold Alt for the distance to any other, or drag to measure an area. - Grid Overlay: draws CSS grid tracks, gaps and named areas, and flexbox items and gaps, on the page. Keep several at once. - Spacing: margins and padding tinted on the page, with their values. - Accessibility Checker: a page-wide contrast audit plus alt text, labels, headings, landmarks and focus order. Every finding has a WCAG reference and a Highlight button that shows it on the page. - Live Edit: change text, spacing, colours and font size on the page you are viewing, with real undo (Cmd/Ctrl+Z), reset, and copy your changes as CSS. Edits stay in your browser tab and are gone when you reload. - Screenshot: the visible area, the full page, or one element. Saved as PNG and copied to the clipboard. - Element Info: tag, classes, size, position and a copyable selector. - CSS Variables: every custom property, grouped by scope, with colour swatches. Click to copy. - Page Meta: title, meta, Open Graph and Twitter tags. - Page Assets: images, scripts, stylesheets and fonts. WORKS WHERE OTHERS STOP - Inside same-origin iframes and inside web components, including closed shadow roots. - On pages with a strict Content Security Policy. - The inspector draws in its own isolated layer, so the page's styles cannot break it. - Nothing runs on a page until you pick a tool, and hovering stays smooth on heavy pages. PRIVATE BY DESIGN - No account, no tracking, no ads. Nothing you inspect leaves your browser. - One request, once: after you have used it on a few different days, it asks whether you would leave a review, with a separate link for reporting a problem, and it never asks again. - Three permissions only: activeTab, scripting and storage. KEYS WHILE A TOOL IS ON Press / for the command palette: search every tool and action, recently used first. Esc exits. Click pins the panel. S screenshots an element. C and T copy CSS or Tailwind. E, P and G open the eyedropper, palette and gradient generator. U changes the Measure unit. I lists page fonts. Alt measures distances. Cmd/Ctrl+Z undoes a live edit. Built by Brightbar (brightbar.dev).