firebug - Hide styles from specific .css file

Question

Is there any way that I can hide styles from specific stylesheets in firebug style panel?
For example I use CSS reset and include reset.css in my pages but it does not look good when it displays useless information in style window.

Thank you.

Answer 1

I know you are asking about disabling stylesheets with FireBug. You asked two years ago. People suggested to hack FireBug and to use another web dev plugin.

Here's my solution: The new Firefox (13.0.1) can do this without a plugin. Just go to web developer tools section of the options and got to style editor (shift F7).
Options>web developer tools > style editor

Click on the eyeball to show/hide each stylesheet.

hope this helps!

Answer 2

If you don't have it already, consider installing this Webdeveloper Toolbar

It can do exactly what you ask for.. And a lot more :)

Answer 3

There is no user interface to do this so far (Firebug 1.9.2), but you can modify the source code... Which mean, however, that you'll need to do this each time Firebug is updated.

First, quit Firefox and find the .xpi package for Firebug.

On my XP machine, it's located in "C:\Documents and Settings\ userName \Application Data\Mozilla\Firefox\Profiles\ profileName \extensions"

Open the file "firebug@software.joehewitt.com.xpi" (it's actually a renamed .zip file) and extract the file "content\firebug\lib\url.js".

In this file, find the "Url.isSystemURL" function and add a line of code to return true if the url parameter contains the name of the CSS file you want to hide (I've used "reset.css" in the example below) :

Url.isSystemURL = function(url)
{
    if (!url) return true;
    if (url.length == 0) return true;
    /*** Hide specific CSS file ***/
    if (url.indexOf("reset.css") != -1) return true;
    /******************************/
    if (url[0] == "h") return false;
    if (url.substr(0, 9) == "resource:")
        return true;
    else if (url.substr(0, 16) == "chrome://firebug")
    ...

You can also use a regular expression :

    if (url.match(/RegExp/)) return true;

When you're done editing, save the file and replace the one in the .xpi with your edited version.

Answer 4

Heres how you do it

Answer 5

In Firefox and Chrome you can install the Web Developer extension.

There's an option to disable CSS styles: CSS meny > Disable Styles > All styles (or individual styles you choose).