What is your favorite Firebug tip or trick?

Question

I think every web developer loves Firefox's Firebug extension for solving CSS, Javascript or HTTP problems.

I use it very often, but I'm sure that I'm not aware of some hidden gems. What is your favorite (not evident) trick or tip for Firebug?

Answer 1

Installing YSlow for Firebug from Yahoo.

Answer 2

Not a Firebug trick itself - but another nice extension for Firebug is Firecookie. It allows to easy manage cookies.

Answer 3

If you're in the habit of writing Greasemonkey scripts, Firebug's $x function is invaluable for debugging your XPATH. In the HTML tab, you can also right click on any element and "Copy XPATH" to speed you on your way to document.evaluate heaven.

Logging all events for any particular element by right clicking on it in the HTML tab and selecting "Log Events" is also pretty nifty.

On the DOM tab, the Options drop down lets you show only properties and functions which have been user defined, which is handy for finding out exactly what impact you're having on the global namespace or debugging problems where someone has accidentally introduced global variables.

Answer 4

the firebug console for easy debug output - superb alternative to alert('blah')

Answer 5

Firephp lets you produce debug messages from php that are sent as headers and logged by firebug. Pixelperfect allows you to place an overlay image in order to align html elements to your draft.

Answer 6

UPDATE:

Seems like you can now override the console object. I'd suggest you go with the link insin has posted as a comment to this answer.

Only FireBug offers the console object to JavaScript.

This fix will prevent JavaScript in IE and other browsers from breaking when FireBug's console object is used in the development phase.

This is a great solution for debugging the same application across multiple browsers. (No more commenting out all your console object calls).

try
{
    var console = {
        log: function () { return; },
        debug: function () { return; },
        info: function () { return; },
        warn: function () { return; },
        error: function () { return; },
        "assert": function () { return; },
        dir: function () { return; },
        dirxml: function () { return; },
        trace: function () { return; },
        group: function () { return; },
        groupEnd: function () { return; },
        time: function () { return; },
        timeEnd: function () { return; },
        profile: function () { return; },
        profileEnd: function () { return; },
        count: function () { return; }
    };
}

catch (e) { }

You can even modify the console object to work in other browsers:

try
    {
        var console = {
            log: function () { for (msg in arguments) { alert(msg); } },
            ....

A neat bonus is that Visual Studio is now able to recognize the console object and it's methods.

Answer 7

Another nice firebug extension is FireSpider, which allows you to easily detect broken links etc in your websites.

Answer 8

Although it's not really a trick or anything nor is it even specific to Firebug, it is my favorite thing about Firebug since I literally use it everyday if not several times an hour and that is of course the ability to directly edit HTML and CSS and watch the result appear instantly. It's an incredible time-saver over just editing and re-uploading to check things out, layout-wise. Everything I do would probably take about twice as long without that feature.

Answer 9

Change style and CSS values on the fly to test as I debug my CSS and design...

Answer 10

I use Firebug now for Flex and Flash apps to figure out what's up (since trace requires somewhere to trace). The method looks like this, sometimes

public static function debug(text:Object):void {
    trace(text); // trace is nice if you've got it
    ExternalInterface.call("console.log", text.toString());
}   

Works like a charm...

(Still not sure if I need console to be an existent Javascript object, in which case you would need to combine roosteronacid's solution with this one. Since you control the HTML page, generally, anything is possible.)

Answer 11

Sometimes when debugging ajax the console doesn't show all requests (for example if you are using cross domain ajax or hidden iframes). You can still view them if you switch to "Net" tab.

Answer 12

If you click on some CSS property name or value in Style tab, you can scroll through all possible values using UP and DOWN arrow keys. It is also works on sizes by incrementing them by 1 (if you press UP on 10px value it will go 11px, 12px and so on) - useful when you try to figure out correct element size/margin as you don't have to enter every number manually.

Answer 13

Many people sometimes forget to use these:

console.log( x,y,z ) -> prints the 3 variables in 1 console line
console.warn("i have background!") -> marks this line, for easy eye spotting ;)
console.dir({a:1,b:2,c:3}) -> prints json/Array data in a nicely way.

Also, I heavily use the NET tab, which is very helpful in viewing JSON traffic data, also for analyzing blocking scripts, and measure HTTP requests times.

Answer 14

Whenever I see an annoying, flashy ad that's distracting me from reading, I simply fire up firebug, use the inspector to inspect the ad's element (or parent element) and then set it's css "display" attribute to "none". Presto, no ad!

Answer 15

If you are not sure how many arguments are passed to some callback function and what are they:

$('li').each(function(/* what's passed here? */) {
    //...
});

you can quickly replace this function with console.log and see all parameters in a log:

$('li').each(console.log);

or use js arguments property to get an array of passed arguments:

$('li').each(function(/* what's passed here? */) {
    console.log(arguments)
});

Answer 16

Writing and testing code right inside firebug, especially coding helper functions.

The feeling of Coding Live is very cool. see a few recent helper functions i have written in firebug