My favorites | Sign in
Project Home Wiki Issues
New issue   Search
  Advanced search   Search tips   Subscriptions
Issue 223: Only show applied styles in Style side panel
10 people starred this issue and may be notified of changes. Back to list
Reported by, Jun 20, 2007
It would be nice if there would be an option in the "Style" tab of an
inspected element to only show the applied styles. It currently has a lot
of "Inherited from ..." blocks where all the styles are dashed out. It
would be neat if you could hide all these style rules so it's clearer to
see WHAT is actually applied.

Maybe an option under "Show Computed Style" ?
Jul 6, 2007
Project Member #1
(No comment was entered for this change.)
Labels: -Type-Defect Type-Enhancement
Oct 16, 2009
Yes, i wish the same feature "Show Applied Style", currently i can realize it by
modify firebug code:

1.C:\Documents and Settings\<user>\Application
(commented 3 places):
                FOR("rule", "$rules",
                    TAG("$ruleTag", {rule: "$rule"})
                FOR("section", "$inherited",
                    /*H1({class: "cssInheritHeader groupHeader"},
                        SPAN({class: "cssInheritLabel"}, "$inheritLabel"),
                        TAG(FirebugReps.Element.shortTag, {object: "$section.element"})
                    FOR("rule", "$section.rules",
                        TAG("$ruleTag", {rule: "$rule"})

            DIV({class: "cssRule insertInto", $cssInheritedRule: "$rule.inherited",
                 _repObject: "$", "ruleId": "$"},
                /*DIV({class: "cssHead"},
                    SPAN({class: "cssSelector"}, "$rule.selector"), " {",
                    TAG(FirebugReps.SourceLink.tag, {object: "$rule.sourceLink"})
                FOR("prop", "$rule.props",
                    DIV({class: "cssProp editGroup", $disabledStyle: "$prop.disabled",
                            $cssOverridden: "$prop.overridden"},
                        SPAN({class: "cssPropName editable"}, "$"),
                        SPAN({class: "cssColon"}, ":"),
                        SPAN({class: "cssPropValue editable"},
                        SPAN({class: "cssSemi"}, ";")
                DIV({class: "editable insertBefore"}, "}")*/

2.C:\Documents and Settings\<user>\Application

.cssOverridden{...} modified to 'display:none;'
Jun 30, 2010
See  issue 2916 . Would that solve your problem?
Jun 30, 2010
Yeah,  issue 2916  is the same with  issue 223 .

Jul 1, 2010
Project Member #6
(No comment was entered for this change.)
Cc: odvarko
Jul 1, 2010
kexianbin, because you're saying, this is the same as  issue 2916 , I'll mark this one as duplicate of it, because it's having more info.
Status: Duplicate
Mergedinto: 2916
Jul 2, 2010

sabine.michael.ratcliffe refuse to merge issuse 223 into  issue 2916 ,
so please restore the issuse 223 status.
For the Trace Styles feature it is important to see:
1. The order of a particular style attributes overrides
2. Which stylesheet the style attribute has come from

Jul 2, 2010
Project Member #9
@sebastian - this is not a duplicate.

The request here is to "Only show applied styles" whereas  issue 2916  is about adding the IE Dev Tools "Trace Styles" Feature.

The "Only show applied styles" feature (this issue) would be an option on the styles tab as it only requires the removal of inherited styles in that tab.

The "Trace Styles" feature involves showing inheritance of styles by attribute rather than by class (see
Status: Triaged
Cc: sabine.michael.ratcliffe
Labels: -Priority-Medium css
Mergedinto: -2916
Jul 2, 2010
Sorry for the mistake! I was seeing both issues as the same. Now it's clear, that these are two different issues.
Feb 19, 2011
It took a long time, but now this feature is finally implemented in r9426.
Summary: Only show applied styles
Status: Commit
Labels: release-note-wanted
Feb 20, 2011
Thanks sebastianzartner for your great job.

Now i get the firebug from
and i can see the option "Only show applied styles" under tab "Style", it shows the sytles:

textarea {
    padding-left: 1px;
    padding-right: 1px;

Could you do me a favor to add option "Only show applied styles" under tab "Computed Style"? And it should only show the styles and without the selectors:

    padding-left: 1px;
    padding-right: 1px;
Feb 20, 2011
I agree with you, that the Computed side panel should also have this option. Though I created a separate  issue 4132  for that feature, because these changes need some more investigation and would probably delay the new feature implemented here for the next (alpha) release.
Therefore I renamed this issue to reflect the changes made here.
Summary: Only show applied styles in Style side panel
Feb 21, 2011
Maybe we shouldn't add "Only show applied styles" in Computed Style side panel, but should add "Only show applied styles(without selectors)" in Style side panel.
Feb 21, 2011
kexianbin, it's enough when you post your comments about your suggestion to  issue 4132 , since this issue here is just covering the applied styles part as described in the issue description.
Feb 21, 2011
Yes, i just need the function "Only show applied styles(without selectors)" in Style side panel which realized in "".

You know, in the era of web 2.0, very often we need embed small parts web pages of other sites into our web sites through AJAX etc. In my mind, in these cases, we need no separate styles(such as in <style>...</style> or in css files), we just need inline styles(in style="..."). Since the whole web page parts along with inline styles are being reused, we need not reuse the separate styles.

So, we could copy the pure styles by "Only show applied styles(without selectors)" into my sites.
Mar 4, 2011
Project Member #18
This is one of 26 issues fixed in Firebug 1.7b1, please install:

and let us know if it works for you!

Status: Fixed
Labels: fixed1.7b1
Mar 4, 2011
Works perfectly for me, nice addition I may add.
Mozilla/5.0 (Windows NT 6.1; rv:2.0b13pre) Gecko/20110303 Firefox/4.0b13pre
Mar 7, 2011
Project Member #20
Thanks for the update!
Status: Verified
Jun 5, 2012
Project Member #21
(No comment was entered for this change.)
Labels: fixed-1.7-b1
Jun 11, 2013
Project Member #22
(No comment was entered for this change.)
Sign in to add a comment

Powered by Google Project Hosting