Firefox Browser Add-ons
  • Extensions
  • Themes
    • for Firefox
    • Dictionaries & Language Packs
    • Other Browser Sites
    • Add-ons for Android
Log in
Preview of Cascade Trace

Cascade Trace by nguyenhann3492

Inspect computed CSS, readable author rules and variable chains. Preview reversible style edits.

0 (0 reviews)0 (0 reviews)
Download Firefox and get the extension
Download file

Extension Metadata

Screenshots
About this extension
Follow a style to its source.

Cascade Trace is a focused CSS inspection workbench for the webpage you are viewing. Select an element, choose a property, and see the value the browser currently computes alongside the readable author declarations that help explain it.

The interface separates measured appearance from source attribution. The computed value comes from the browser. Declaration ordering is shown for supported, readable author CSS; when layers, complex selectors, inaccessible stylesheets or other unsupported cascade features prevent reliable ordering, the tool labels the result as partial instead of pretending to know the winner.

What you can do:
- Pick a page element directly, or move up to its parent.
- Inspect common properties including colour, typography, dimensions, display, positioning, spacing, overflow and white-space.
- View rendered border-box dimensions, box-sizing, padding and margins.
- Examine matching declarations, their selector, source label and !important status.
- See inherited declarations and follow var() references from the top readable candidate, with bounded depth and cycle handling.
- Preview a valid value for an allowed CSS property using a temporary inline !important override.
- Undo preview edits, export a CSS patch, or download a JSON inspection snapshot.
- Move or collapse the workbench to reach the page behind it.

Start on an ordinary website. Open Cascade Trace from the toolbar, press Open CSS inspector, and choose Inspect an element. Escape cancels selection. Use Refresh after the page changes. The view is an explicit snapshot, not a continuously updating replacement for browser DevTools.

Preview supports colour, background colour, font size, line height, width, max-width, margin, padding, gap, border radius and white-space. CSS values are checked by the browser. URLs, declaration separators and unsupported properties are rejected. Closing the tool restores its edits. If the website changed the same property during a preview, undo preserves the website's newer value and reports the conflict when invoked from the undo action.

Everything is local to the current document. No account, analytics, history database or remote service is used.
Rated 0 by 0 reviewers
Log in to rate this extension
There are no ratings yet

Star rating saved

5
0
4
0
3
0
2
0
1
0
No reviews yet
Permissions and data

Data collection:

  • The developer says this extension doesn't require data collection.
Learn more
More information
Add-on Links
  • Support site
  • Support Email
  • Copy add-on ID
Version
1.0.0
Size
34.85 KB
Last updated
12 days ago (Sep 19, 2026)
Related Categories
  • Web Development
  • Appearance
License
Mozilla Public License 2.0
Privacy Policy
Read the privacy policy for this add-on
Version History
  • See all versions
Add to collection
Report this add-on
Go to Mozilla's homepage

Add-ons

  • About
  • Firefox Add-ons Blog
  • Extension Workshop
  • Developer Hub
  • Developer Policies
  • Community Blog
  • Forum
  • Report a bug
  • Review Guide

Download

  • Download Firefox
  • Windows
  • macOS
  • iOS
  • Android
  • Linux
  • All

Latest Builds

  • Nightly
  • Beta

Firefox for Business

  • Enterprise

Community

  • Connect
  • Contribute
  • Developer

Follow

  • Instagram
  • YouTube
  • TikTok
  • Bluesky
  • Podcast
  • Privacy
  • Cookies
  • Legal

Except where otherwise noted, content on this site is licensed under the Creative Commons Attribution Share-Alike License v3.0 or any later version.