I installed Firebug a long while back and didn’t think much of it. Granted I never read the docs or even the description. I like to just try things out and if I don’t figure it in 10 seconds flat it normally gets ignored. Unfortunately that meant I missed an absolute goldmine and looked a prat in the process.I’ve since attained ‘Firebug Enlightenment’ and so I thought I’d throw together a ripspeed post on Firebug for the un-initiated and un-convinced:
See the response of Ajax calls
This was what really hit me when I delved a bit deeper into Firebug. Its a shame its so hidden away but by opening up your Firebug console and selecting the “Net” tab before clicking “XHR” you will get a listing of all the Ajax calls made so far since the last full page load. If you click on a particular listing then it’ll expand to give you information on the headers sent and any server response. This is invaluable to debugging your Ajax apps!
Edit HTML and CSS live
When you eventually get out of the habit of pressing F5 for every change you make to your page and start using this feature you’ll become a whizz. You can inspect and modify the entire DOM on the fly with all changes appearing live.
Debug Javascript
Not only will Firebug notify you with a statusbar area the number of errors in your document but you can open the Firebug console to get further detailed information on any errors, including their location and debug messages.
You can even execute any javascript commands from the Firebug console allowing you to tweak and experiment with the page on the fly.
More info…
Logging
You can enter anywhere in your javascript code the logging commands to get information on a variety of variables and objects as your code runs. Which is so much more freindly and efficient than the old school “alert()” method.
console.log(myVar); //echos the var to the console
console.dir(myObject); //echos all the variables and methods of the supplied object
More info…
Getting info on objects and variables
On the console you can type a variety of commands but my most heavily used is:
dir(myObject);
It doesn’t look like much but its incredibly useful as it allows you to see all the methods, values and state of the object you pass to it. You can do it with anything in your document, including the document itself.
