Facebook Cookbook - Jay Goldman [110]
Use Firebug (No, Seriously)
Problem
Unfortunately, I lack any form of extrasensory powers and have no idea why my HTML isn’t rendering properly, what my Ajax calls are returning, or the first clue why my JavaScript is behaving like it’s possessed.
Solution
Install Firebug, a Firefox add-on, and make your life considerably easier. Install it with a single click from http://www.getfirebug.com/, give your browser a quick restart, and then click on the little bug icon in the status bar at the bottom of your window and let the festivities begin.
If you’re not running Firefox, you can still access some of this functionality by including the firebug.js JavaScript file in your pages (although this may fail when parsed through the FBJS parser). For more information, see http://www.getfirebug.com/lite.html. Do yourself a favor, though, and download Firefox and Firebug just to see how much easier this will make your life. You should still test in Internet Explorer and Safari, but your joy in building Facebook applications (and any other web project) will increase by the bucketload.
Discussion
Some web developers are born with a sixth sense that lets them do freaky things like writing flawless cross-browser HTML on the first try or crafting brilliant JavaScripts that make my head hurt to even contemplate. For the rest of us, there’s Firebug. If you’re a devout Internet Explorer or Safari user, you’re going to want to just skip to the next recipe before you find your life changing in unexpected ways. If you’re already a dedicated Firefox user, prepare to fall in love all over again. If you do any web development of any kind and don’t yet know about Firebug, you’d better grab a seat. (You should really grab one anyway—isn’t this book getting heavy?)
Real firebugs, known in some circles as Pyrrhocoris apterus, are members of the insect order Hemiptera, usually mate in April and May, and subsist primarily on a diet of seeds from lime trees and mallows. Lovely as they are, they certainly aren’t going to help your web development efforts. Recognizing this shortfall, top-notch developers and Firefox contributors Blake Ross and Joe Hewitt built Firebug and reshaped web development forevermore. Firebug gives you the ability to inspect and edit HTML on the fly, tweak your CSS in place and see the results, visualize CSS metrics and the box model of your objects, monitor network activity and watch GET and POST requests from your page as they happen, debug and profile JavaScript, catch and monitor all of the exceptions and errors thrown by your code, explore the DOM and all of its properties, execute JavaScript on the fly, and log JavaScript errors, warnings, and info straight to the console.
NOTE
Just for the sake of this story having a happy and entirely relevant-to this-book ending, Blake and Joe were nice enough to go and sell their company, Parakey, to Facebook, where they now do amazing things, such as building the iPhone version of the Facebook site.
There are a bunch of uses for Firebug in building Facebook applications, not the least of which is figuring out what your JavaScript is doing and walking through the various ways that the FBML and FBJS parsers have modified your code. One of the most useful features is the ability to log to the console, as well as to output your objects in human-readable form. Firebug automatically adds a console object to any window in which it’s enabled, which means you can freely call the functions in the console from inside your own code. Here are some of the most useful functions you can try in your own code:
console.log('What the heck is this: ', obj);
Having a debugger