Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

firebug - Hide styles from specific .css file

Tags:

css

firebug

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.

like image 463
Kai Avatar asked Nov 23 '10 11:11

Kai


3 Answers

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!

like image 195
Newman5 Avatar answered Nov 13 '22 20:11

Newman5


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

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

like image 43
Claus Asbjørn Sørensen Avatar answered Nov 13 '22 20:11

Claus Asbjørn Sørensen


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 "[email protected]" (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.

like image 24
Goozak Avatar answered Nov 13 '22 22:11

Goozak