10 Tips to Master the Firebug Console

Here are some tips so you can start owning that Firebug Console!

If you don’t know what the Firebug Console is then here then start here: What is Firebug and how to set it up.

Tip 1 – How to Hide Annoying Errors

Firebug has options to hide those annoying network errors! (you might see these if your proxy settings are out, if your at work check with your admin that your using the right .pac file). This options menu can also be used to hide other error types. Very useful!

Tip 2 – Keyboard Shortcuts

Instead of clicking “run” with the mouse you can Press CTRL+ENTER to run the code that is in the Firebug Console. See a Full List of Keyboard Shortcuts.

Tip 3 – Firebug Console Table

Create a firebug console table – just paste in the code below to check it out!

var table1 = new Array(5);
for (var i=0; i
Tip 4 - Console.dir()
The benefit of using Console.dir() instead of console.log() is that on objects, arrays and other types it displays their properties straight up, which can save time. You can simply type dir(nameofobject) into the Firebug Console. I like dir.



Also to note that "Dir" works without "console." (but log doesn't!)
[js]
JQUERY4U = {
    url:'http://www.jquery4u.com',
    mainTopics:'jquery,javascript'
}
dir(JQUERY4U); //works without console.
log(JQUERY4U); //doesn't

Tip 5 – Console.debug()

The benefit of using Console.debug() instead of console.log() is that it cuts out all the crap which can get annoying when your trying to debug you JavaScript code. Useful for those who use it frequently, not many do. Love debugging? Read more info on debugging chains

Tip 6 – Create a Quick Bookmarklet

You can create quick bookmarklet of the code in your Firebug Console. Simply press copy > right click bookmark bar > click paste. Job done. Now you can click that bookmark to run the code when you need it, even across browsers for testing purposes.

Some bookmarks to try out:

• jQuery Floating Bookmark Globe – Awesome Fun!
• JavaScript to Edit Web Page Directly

Tip 7 – Using Firebug NET Panel

Learn how to use the Firebug NET Panel: How to Analyse HTTP Requests using Net Panel, HTTP Fox & Fiddler2.

Tip 8 – Firebug “Add-ons” and Extensions

There are heaps of useful ‘add-ons’ to complement the Firebug Console. See: 10 Extension Plugins to Extend the Firebug Console

Tip 9 – Firebug Console API

If you didn’t already know there is a Firebug Console API with lots of useful information.

Tip 10 – Checking DOM CSS Styles

In Firebug you can easily check the styles associated with any element thats on the page. Simply right click and inspect that element then switch to the CSS tab. In the CSS tab, any styles that are striked through means that it has been preceded by another style. Remember styles take the following precedence: 1) inline, 2) in-page 3) stylesheet. You can edit the styles live and double click inside the tab to create a new style for that CSS tag.

Hope these quick tips helped you learn something you didn’t know about the awesome Firebug Console.