What is your favorite Firebug tooltip or trick?

Question

I think every web developer loves the Firefox Firebug extension to solve problems with CSS, JavaScript or HTTP.

I use it very often, but I am sure that I do not know about any hidden gems. What is your favorite (not obvious) trick or tip for Firebug?

Answer 1

Install YSlow for Firebug from Yahoo.

Answer 2

Here is one of my tips.

Debugging JavaScript, you can set conditional breakpoints by right-clicking on the red breakpoint symbol:

Answer 3

Although this is not a trick or anything else, and it is not even typical of Firebug, it is my favorite thing in Firebug, as I literally use it every day, if not several times per hour, and this, of course, the ability to directly edit HTML and CSS and make sure that the result is displayed instantly . This is an incredible time saver when editing and reloading to check everything layout. Everything I do will probably take about two hours without this feature.

Answer 4

If you are used to writing Greasemonkey scripts, the Firebug $x function is invaluable for debugging your XPATH. On the HTML tab, you can also right-click on any element and “Copy XPATH” to speed up the transition to document.evaluate .

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

On the DOM tab in the "Parameters" drop-down list, you can display only those properties and functions that have been defined by the user, which is convenient for determining what impact you have on the global namespace or debugging problems when someone accidentally presents global variables .

Answer 5

Firebug console for easy debug output. This is an excellent alternative to alert('blah') .

Answer 6

Firebug is n't fooling itself - but another nice extension for Firebug is Firecookie . This makes it easy to manage cookies.

Answer 7

Another nice Firebug extension is FireSpider , which makes it easy to detect broken links, etc. on your sites.

Answer 8

Now I use Firebug for Flex and Flash applications to find out what is happening (since the trace requires tracking somewhere). 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 the console as an existing Javascript object, in which case you will need to combine the roosteronacid solution with this. Since you are managing an HTML page, anything is usually possible.)

Answer 9

If you click on the name or value of the CSS property on the Style tab, you can scroll through all the possible values ​​using the UP and DOWN arrow keys. It also works with dimensions, increasing them by 1 (if you press UP at 10px, it will be 11px, 12px, etc.) - useful when you are trying to figure out the correct element size / margin, since you do not need to enter each number manually.

Answer 10

My absolute favorite thing is the $0 built-in variable , which indicates what you recently checked. I found out about this recently and it is so useful.

Answer 11

UPDATE:

It looks like you can now override the console object. I suggest you look at Insin (which was posted as a comment on this answer).

Only Firebug offers a console object for JavaScript.

This fix will prevent JavaScript from breaking in Internet Explorer and other browsers if the Firebug console object is used at design time.

This is a great solution for debugging the same application in multiple browsers. (No longer comments on all your calls to console objects.)

 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 change the console object to work in other browsers:

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

The net bonus is that Visual Studio can now recognize the console object and its methods.

Answer 12

FirePHP allows you to create debugging messages from PHP , which are sent as headers and registered by Firebug.

Pixelperfect allows you to place an overlay image to align HTML elements with a draft.

Answer 13

CodeBurner is a documentation add-on for Firebug that displays reference material for any HTML element or CSS property. He adds a link bar containing:

• compliance
• browser compatibility
• Syntax
• code examples

Mozilla Add-on Link

You also can:

• Search for all known HTML elements, attributes, and CSS properties.
• find the selected item through the context menus of the following Firebug panels:
  • HTML and CSS
  • Dom crumbtrail
  • Inspector

Answer 14

If you don't know how many arguments are passed to any callback function and what they are:

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

you can quickly replace this function with console.log and view all the parameters in the log:

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

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

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

Answer 15

Firequery It will inject jQuery into the page and allows you to use it from the console tab, which simplifies jQuery testing or simply runs commands on the page you are on. It also adds some extensions to the HTML tab that will allow you to see things like jQuery data tags and attached events. This is necessary if you are using Firebug and doing jQuery development.

Answer 16

Many sometimes forget to use them:

console.log (x, y, z) -> prints 3 variables in 1 console line
console.warn ("I have a background!") → marks this line, for convenient eye detection;)
console.dir ({a: 1, b: 2, c: 3}) -> perfectly prints json / Array data.

In addition, I heavily use the NET tab, which is very useful when viewing JSON traffic data, also for analyzing blocking scenarios and measuring the time of HTTP requests.

Answer 17

Whenever I see annoying, screaming ads that distract me from reading, I simply launch Firebug, using inspectors to check the advertising element (or parent), and then set the "display" attribute on the CSS to "none". Presto, no ads!

Answer 18

Change CSS style and values ​​on the fly to test how I am debugging my CSS and design ...

Answer 19

Sometimes when debugging Ajax, the console does not display all requests (for example, if you use the Ajax cross-domain or hidden frames). You can view them if you go to the "Network" tab.

Answer 20

Writing and testing code directly inside Firebug, especially for auxiliary coding functions.

The feeling of coding live is very cool. See some recent helper functions I wrote in Firebug.