CSS Style Inspector

WHAT IT DOES

CSS Style Inspector gives you a complete view of any element's CSS styles directly in your browser. Hover over any element to see its computed styles in real time, including inherited properties, box model dimensions (margin, border, padding, and content), and a ranked list of matching selectors with their specificity values. The tool displays all calculated CSS properties, highlights the element on the page with a visual overlay, and lets you copy style data to your clipboard. The live inspection mode makes it easy to debug layout issues, understand complex inheritance chains, and verify selector specificity without opening the browser's developer tools.

WHERE IT RUNS

The extension runs entirely within your browser's local environment using the BotGentz framework. All style computations, DOM traversal, and selector matching occur on your machine without any network requests. No page content, style data, or user activity is ever transmitted, uploaded, or stored externally. The tool works on any website and respects the browser's security boundaries, operating within the isolated extension sandbox.

HOW TO USE

Click the extension toolbar icon to open the CSS Style Inspector panel. Click the "Toggle Inspector" button to activate the inspection mode. Move your mouse over any element on the page; the panel updates instantly with the element's computed styles, and a highlight box surrounds the element. Click an element to lock the selection and freeze the display for detailed review. The "Show computed styles" toggle displays standard CSS properties like color, font-size, and background. The "Show inherited styles" toggle reveals properties inherited from parent elements. The "Highlight on hover" toggle controls the visual overlay. Use the "Copy Styles" button to copy all displayed style data to your clipboard for documentation or debugging.

THE COMPUTED STYLE EXTRACTION ENGINE — WHY IT WORKS

Most browser-based inspectors rely on reading inline styles or external stylesheets, which misses dynamically calculated values and the final cascaded result. This tool uses the browser's native getComputedStyle API, which returns the actual rendered values after all CSS rules, inheritance, cascading, and browser defaults have been applied. The tool then cross-references these computed values against the element's own style attributes, the document's style sheets, and inherited properties from the DOM hierarchy. The selector matching engine uses the element.matches() API to test each stylesheet rule against the target element, then calculates specificity using a four-part weighting algorithm (inline styles, IDs, classes/attributes, and element types) to rank matched selectors in order of precedence. The box model extraction reads both getBoundingClientRect for pixel-perfect dimensions and getComputedStyle for precise margin, padding, and border values, giving you the exact layout measurements seen by the browser's layout engine.

THE PANEL

The inspector panel is fully draggable by its title bar and remembers its position on screen per website. It snaps to the edges of your browser window for clean alignment. Collapse the panel to a compact icon strip using the minimize button, restoring it with a single click. Resize the panel by dragging any edge or corner; the style output area and controls adjust proportionally. Press the Escape key to deactivate the inspector mode and close the panel instantly. The panel maintains independent state for each browser tab, allowing you to inspect elements in multiple tabs simultaneously.

PLEASE NOTE

This extension requires the free BotGentz extension framework to be installed and enabled. Websites continuously evolve their rendering techniques and CSS specifications; while the inspector works across most modern sites, complex CSS features like CSS variables, custom properties, or shadow DOM may require additional handling. All style data is stored locally in your browser's storage and is never transmitted, logged, or shared. The extension requests no network permissions and functions entirely offline. The source code is fully auditable and available for review.