Facebook Cookbook - Jay Goldman [111]
console.debug(), console.info(), console.warn(), and console.error()
Logging stuff is fun and all, but once your console is full of information, you’re going to wish you had a way to sort through it. In addition to the ever-handy console.log() just mentioned, Firebug supports four other levels of console output in the form of debug(), info(), warn(), and error().
console.assert( expression )
Tests to see whether expression resolves to true, and throws a logged exception if not.
console.dir(obj) and console.dirxml(node)
Outputs DOM and XML views of an object, respectively. The console.dir() view is similar to what you would see if you used Firebug’s DOM inspector, whereas console.dirxml() outputs the same source tree that you would see in the HTML inspector.
console.time() and console.profile()
If you’re having trouble with the performance of a block of JavaScript, these two functions can be lifesavers. Add a call to console.time('timerName') before your code and a complementary console.timeEnd('timerName') after, and you’ll get precise time info. If that’s not enough information for you, throw in console.profile('profileName') and console.profileEnd('profileName'), and you’ll get an incredibly detailed breakdown of every call that gets made, how many times it gets called, how long it takes to run, exactly which file it’s in, and the line it’s contained on.
There’s way more to the application than that, and we could probably fill a whole different O’Reilly book on the topic. In the meantime, check out http://www.getfirebug.com/docs.html for more information.
Accessing the DOM Behind FBJS
Problem
I need to see the actual DOM object that’s behind an FBJS variable, but I can’t figure out any way to get to it.
Solution and Discussion
Install Firebug (see Use Firebug (No, Seriously) for more information), and then add a call to console.dir(obj) on your object. Firebug will give you a long listing of all of the functions that FBJS has added to your object (starting with things such as addClassName(), addEventListener(), appendChild(), etc.), at the very top of which you will find a PRIV_obj entry. If you open that up, you’ll see the actual DOM object hiding behind the ultimate FBJS representation.
Ajax Library: Backface
Problem
I’d really like to do some nifty Ajax animation effects or use some cool interface widgets and drag-and-drop actions, but none of the traditional Ajax libraries work inside of Platform.
Solution
Backface is a library for creating draggable widgets within your Facebook Canvas. Created by Peter Svensson from Stockholm, Backface (a.k.a. The Library Formerly Known as Prince—or TLFKAP—after he discovered that applications including the word “face” are not allowed on Facebook) can be found at http://apps.facebook.com/backface/ and includes links to the downloadable PHP sample app and source. Backface won’t quench all of your Ajax cravings, but it will allow you to do some neat drag-and-drop stuff, and it has panes and resizable objects coming, all written in FBJS so they don’t run afoul of the parser.
Once you’ve downloaded and unpacked backface.zip, you’ll find some documentation, a demo, and backface.inc, the actual include file. If you’re building your Facebook app in PHP, the easiest way to work with it is to include(backface.inc) in the page you want to use it on.
Discussion
Peter is pretty dedicated to the project and has been quick to respond to developers’ requests for features. You can follow along on his blog at http://unclescript.blogspot.com/, or by keeping tabs on the latest news in the Backface app on Facebook. The original library was hacked together