Identify unused CSS rules

NEW
Unassigned

Status

()

Firefox
Developer Tools: CSS Rules Inspector
P3
enhancement
4 years ago
a year ago

People

(Reporter: canuckistani, Unassigned)

Tracking

16 Branch
x86
Mac OS X
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Identify useless CSS rules Projects grow and evolve and some rules become useless. Removing dead CSS code is not as easy as dead HTML or dead JS.

etherpad: https://etherpad.mozilla.org/sudweb-devtools-progress
original email: http://markmail.org/thread/qfwfxryspiwzfad3#query:+page:1+mid:qfwfxryspiwzfad3+state:results
Taras recently wrote up some prototype code we hope to include as a GCLI command. Might be useful for this.

https://bugzilla.mozilla.org/show_bug.cgi?id=834865

Updated

4 years ago
Duplicate of this bug: 942173

Comment 3

4 years ago
From bug 898624:

(In reply to Ben Kelly [:bkelly] from comment #0)
> Currently the devtools inspector allows us to see rules applied to a single
> element at a single moment in time.  For dynamic pages, like b2g apps, it
> would be nice to be able to see rules as they change over time.
> 
> Possible use cases:
> 
> 1) Determine the minimal set of CSS rules used within an app.  For example,
> many b2g apps pull in largish blocks of CSS from our building blocks, but
> may only use a small subset of the styles.
> 2) Visualize style changes over time to identify potential performance
> issues during transitions and other user operations.
> 
> This could possibly be hacked up as a simple logging facility at first.  A
> longer term tool might look something like:
> 
> 1) Press "style record" button.
> 2) Perform operations on page.
> 3) Press "record complete" button.
> 4) Tool shows a timeline with vertical marks indicating style changes.  (It
> would be nice if this was overlayed on top of other information like
> touch/mouse events for context.)
> 5) Click on a style change marker in the timeline to inspect the rules that
> were removed and added.
> 6) Tool also shows a list of rules that were used at least once during the
> record period.
> 
> This is similar in purpose, but perhaps a bit different to bug 898624 and
> bug 834865.

Updated

2 years ago
Component: Developer Tools: Inspector → Developer Tools: CSS Rules Inspector
Severity: normal → enhancement
Inspector bug triage (filter on CLIMBING SHOES).
Priority: -- → P3
You need to log in before you can comment on or make changes to this bug.