A Chrome DevTools extension for extracting the HTML and CSS context needed to diagnose styling problems or share focused context with AI.
Download the latest Chrome-ready release
See Installation for brief installation instructions.
AI can only troubleshoot the code it can see.
Providing an AI assistant with an element's HTML alone can lead to bad CSS recommendations because the element's appearance may also depend on inherited styles, custom properties, media queries, pseudo-classes such as :hover, pseudo-elements, and surrounding DOM relationships.
Providing the entire page and every stylesheet solves that problem by creating another one: huge, noisy prompts that waste tokens and make the relevant code harder to identify.
CSS Tree Inspector extracts the selected DOM subtree and the CSS information most useful for diagnosis. It can generate a readable CSS report or a structured JSON report that can be reviewed directly or provided to an AI assistant.
All inspection happens locally inside Chrome DevTools.
- Generates readable, relevant computed CSS for a selected element and its descendants instead of dumping the complete
getComputedStyle()namespace. - Produces valid nested JSON containing attributes, dimensions, direct text nodes, computed CSS, pseudo-element data, and the selected subtree's exact outer HTML.
- Prioritizes direct text in each JSON element and omits empty optional fields for a more compact report.
- Includes visual and state-related HTML attributes by default, with an option to include all HTML attributes.
- Captures authored state rules such as
:hover,:focus-visible, and:focus-within, including states involving ancestors, siblings, and related descendants. - Preserves available
@media,@supports,@container,@layer, and similar grouping context for captured state rules. - Captures relevant active and inactive media and container-query rules in each element's
conditionalCSSarray. - Recovers available cross-origin stylesheet content through Chrome DevTools and applies the same focused selector and cascade analysis without requesting host or debugger permissions, including inactive media-query rules.
- Cleans source-formatting whitespace from text nodes while preserving meaningful inline and whitespace-sensitive content.
- Excludes non-rendering infrastructure elements from the inspection tree while retaining hidden ordinary elements and unchanged
outerHTML. - Keeps reports visible when the DevTools selection changes and marks them as stale.
- Copies reports only when you click Copy.
- Supports Chrome DevTools light and dark themes.
- Uses no analytics and makes no network requests.
See Installation to install a Chrome-ready release as an unpacked extension.
- Select an element in the DevTools Elements panel.
- Open the CSS Tree Inspector sidebar.
- Click Generate Tree JSON or Generate Tree CSS.
- Review the report or click Copy to place it on the clipboard.
Use Refresh to regenerate the report or Clear to remove it.
Enable Include HTML Attributes before generating or refreshing JSON to include all attributes. When unchecked, the report retains common visual/state attributes and name, while omitting unrelated metadata such as most data-* attributes. id and class remain available through their dedicated fields in either mode.
Choose Embed CSS in each DOM node for an easier-to-read but larger report. Choose Combine duplicate CSS into definitions for a compact report that moves repeated computed, state, and conditional CSS into top-level styleDefinitions, reducing token use. Unique CSS remains inline.
Both JSON-specific controls are grouped under JSON Options above the generation buttons.
JSON output describes the selected DOM subtree and includes:
- Element names and attributes
- Dimensions
- Direct text nodes
- Relevant computed CSS
- Stateful CSS rules
::beforeand::afterpseudo-element information- Nested descendants under
subTreeElements - The selected subtree's exact
outerHTML
The outerHTML value is equivalent to Chrome Elements' Copy outerHTML result.
When present, textNodes is the first property in an element object. Empty optional properties, including text, attributes, computed CSS, state CSS, conditional CSS, pseudo-elements, shadow-root data, and descendant arrays, are omitted rather than emitted with empty or null values.
In combined mode, exact duplicate styles use computedCSSRef, stateCSSRef, or conditionalCSSRef. Definitions receive stable names such as computed-1 in DOM encounter order. Embedded mode remains the default.
Combined reports instruct readers to resolve *CSSRef values through styleDefinitions.
CSS output follows document order for the selected element and its descendants. Within each generated rule, computed properties are sorted alphabetically. Captured authored state and conditional rules retain stylesheet source order.
CSS Tree Inspector examines accessible stylesheet rules and inline declarations that match each element, resolves ordinary cascade priority, and exports final browser-computed values only for properties determined to be relevant.
Inherited declarations are retained when their computed values affect the inspected element.
When a relevant declaration uses var(), CSS Tree Inspector retains the authored custom property and recursively referenced custom properties while omitting unrelated global custom properties.
Each JSON element can include a stateCSS array.
computedCSS describes the element's current rendered state. stateCSS contains authored declarations that could apply under pseudo-class conditions without requiring CSS Tree Inspector to activate those states.
For example:
.header:hover .title {
color: red;
}The .title element can receive this rule in its stateCSS data even though the :hover state was not active during inspection.
State analysis supports relationships involving ancestors, siblings, descendants, :has(), multiple simultaneous states, and states inside selectors such as :is(), :where(), and :not().
Pseudo-element state rules are stored under the corresponding pseudoElements.before.stateCSS or pseudoElements.after.stateCSS array.
CSS Tree Inspector does not hover, focus, click, toggle, or otherwise modify the inspected page. Authored :visited rules may be reported, but the extension never attempts to determine browsing history.
Each element can include a conditionalCSS array containing relevant authored rules nested under @media or @container.
Inactive media rules are retained, and currentlyMatches reports current matchMedia() applicability. Container-query applicability is left as null because standard page APIs do not expose a reliable equivalent. Nested media/container contexts and conditional state selectors are preserved without flattening them into unconditional CSS.
When page-level CSSOM blocks a stylesheet, CSS Tree Inspector attempts to recover its already-loaded content through Chrome DevTools and reruns the same focused matching and cascade analysis.
Stylesheets that remain unavailable are reported once in corsIssues; CSS export includes the same diagnostic as a comment.
Recovered stylesheets retain active and inactive @media rules. Relevant inactive rules remain in conditionalCSS with currentlyMatches: false; they do not alter the element's current computedCSS.
- CSS Tree Inspector captures computed values and relevant authored rules, but does not provide complete stylesheet provenance or every overridden declaration.
- Shadow DOM contents are not currently traversed. An encountered open shadow root is noted in JSON.
- Inspection inside unusual iframe execution contexts may depend on Chrome DevTools behavior.
- Cross-origin stylesheet recovery depends on the stylesheet being available as a Chrome DevTools resource.
- Cascade layers, complex selector specificity, animations, transitions, and browser or user styles can affect computed values in ways that standard page APIs cannot always attribute precisely.
- Selectors unsupported by the current browser, or selectors that cannot be safely analyzed, are skipped rather than forced.
- Very large DOM subtrees can produce large reports and require additional processing time.
- Generated CSS selectors are readable paths relative to the selected root and are not guaranteed to be globally unique production selectors.
All inspection happens locally.
CSS Tree Inspector does not transmit or remotely store inspected page data and requests no browsing, host, cookie, history, or network permissions.
It does not require Chrome's debugger permission.
See the Privacy Policy for details.
© 2026 24Moves / Joe Lippeatt / 24moves.com