InnerScope: CSS & Network Inspector
designforever.com · Developer Tools
Media
1 item
Description
Inspect CSS & network in a side panel — replay requests, mock responses, copy as cURL, HAR export, tokens & a11y scans. InnerScope — a CSS inspector and network debugger that lives in your browser's side panel. Inspect and edit styles, capture / replay / mock network requests, scan for design tokens and accessibility issues, and drive it all from a command palette. No account, no server, no telemetry — everything runs locally in your browser. ━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🔍 INSPECT TAB • Click-to-pick element inspection — hover to highlight, click to inspect. Get matched CSS rules (grouped by stylesheet, with @media/@layer context), computed styles, and the DOM tree. • Live editing — change selectors, properties, and values and apply them back to the page. • Design token scan — collect every color, font family, font size, and spacing value in use, with usage counts and one-click copy. • Accessibility quick scan — missing alt text, unlabeled buttons/links/fields, WCAG contrast ratios, and undersized tap targets. • Element diff — pick two elements and compare 27 computed-style properties side by side. • Color swatches, collapsible HTML tree, and interactive JSON tree views. 🌐 NETWORK TAB • Live capture of fetch, XMLHttpRequest, sendBeacon, WebSocket frames, and SSE — with headers, bodies, timing, and GraphQL operation detection. • Replay any request in the page with its original cookies and session, or open it in the request editor (method, URL, headers, body). • Copy everything, your way — right-click any request to copy as cURL, fetch(), or PowerShell, with or without tokens and cookies. Copy the whole filtered list as an LLM-friendly pack. • Powerful filtering — query language like method:POST status:404 body:email url:/api, plus saved filter presets. • DevTools-style columns — waterfall, method, status, type, size, initiator, and more. Sort, group, show/hide, and resize any column. • Request breakpoints — hold matching requests before they leave the page; resume, edit, or drop them. • Mock, rewrite & chaos rules — return synthetic responses, rewrite URLs and headers, or inject delays and network errors. Wildcard and regex patterns, grouped into toggleable rule sets. • Diff two responses side by side. • HAR import/export and full session backup (rules, favorites, presets). • Favorites, preserve log, waterfall latency bars, and a live stats bar. ⌨️ COMMAND PALETTE Press Ctrl+K (⌘K) anywhere in the panel for a fuzzy-searchable launcher: switch tabs, toggle views, arm breakpoints, export HAR, run scans, and more. ━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🔒 PRIVACY FIRST Local-first by design. No server, no account, no analytics, no telemetry. Captured data stays in your browser profile via chrome.storage.local. Secret-including copy toggles (Authorization headers, cookies) are off by default. Uninstalling removes everything. ✨ LIGHTWEIGHT & OPEN Manifest V3, vanilla JavaScript, zero npm dependencies, no build step. Dark (Catppuccin Mocha) and light themes included. Whether you're debugging an API, reverse-engineering a design system, checking accessibility, or handing clean request copies to your favorite AI assistant — InnerScope puts it all one panel away. Requires Chrome 116+. Also works in other Chromium browsers with MV3 side panel support (Brave, Edge, and more).