Sparrow - CSS Inspector & Annotator od Ali asger

Sparrow - CSS Inspector & Annotator

Turn any website into an inspectable, editable, and review-ready canvas. Sparrow puts six professional design and development tools behind a single toolbar button. No DevTools, no code, no copy-pasting. Click the icon and a floating toolkit appears right on the page; click it again (or press Esc) to dismiss it.

Perfect for designers, developers, QA reviewers, and anyone who gives feedback on live web pages.

━━━━━━━━━━━━━━━━━━━━
SIX TOOLS, ONE BUTTON
━━━━━━━━━━━━━━━━━━━━

🔍 INSPECT - See the real CSS behind any element
Hover over anything to view its matched CSS rules in true cascade order, just like DevTools' Styles panel. Overridden declarations are struck through so you can see the cascade at work. View the computed box (width, padding, border, margin), resolved fonts, and :hover / :focus / ::before states each neatly grouped. Click to freeze the selection, then copy the values. Switch color formats between HEX, RGB, and HSL.

📌 ANNOTATE - Drop review pins on a live page
Stop screenshotting pages to mark them up elsewhere. Drop numbered pins directly onto the live site, add comments, and track each one with a status (open / resolved). All pins collect in a clean sidebar and are saved to your browser, tied to the page URL, so they're waiting for you when you return.

📏 RULER - Measure the space between anything
Click one element to anchor it, then point at another to see the exact pixel distance between them. The fastest way to check spacing and alignment.

🎨 COLORS - Audit and re-skin the whole palette
Sparrow scans the entire page and collects every color in use. Pick any color and swap it live — recolor a single element or every occurrence across the whole page at once. Perfect for testing brand-color ideas instantly. Every change is fully reversible and never edits the site's real stylesheets.

🔤 FONTS - Audit and swap typography
See every font the page uses, then replace one element's font or an entire family. Choose from Google Fonts (loaded before the swap, so no flash of fallback text) or upload your own font file. Reversible and non-destructive.

🖼 ASSETS - List and download page media
Scan the page for its images and other assets, browse the full list, and download the ones you need.

━━━━━━━━━━━━━━━━━━━━
PRIVATE & SAFE BY DESIGN
━━━━━━━━━━━━━━━━━━━━
• Local by default - Inspect, Ruler, Colors, Fonts, and Assets run entirely in your browser. Nothing about the pages you inspect is ever sent anywhere.
• Non-destructive - Color and font edits are applied as reversible overrides with the original values saved, so a reset is always exact. Sparrow never modifies a website's source.
• Fully sandboxed - The entire interface runs inside an isolated Shadow DOM, so Sparrow's styles and the page's styles never interfere with each other.
• Dormant until you ask - The tool stays inactive on every page until you click the toolbar icon.

━━━━━━━━━━━━━━━━━━━━
ACCOUNTS & PLANS
━━━━━━━━━━━━━━━━━━━━
Five of the six tools need no account at all. Only Annotate requires signing in, since your annotations are tied to you - sign in through the Sparrow web app and the extension unlocks Annotate automatically.

Sparrow offers a free tier plus Pro and Max plans. Inspect and Ruler are always available; Colors, Fonts, Assets, and the color-format toggle unlock on paid plans, and your annotation allowance per site scales with your plan (Free 3 / Pro 10 / Max unlimited, on a rolling 24-hour window per domain).