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<table1 .length; i++) table1[i] = [i+1, i+2, i+3, i+4, i+5, i+6, i+7]; console.table(table1);
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!)
Tip 5 – Console.debug()
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:
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.