That’s a lot of CHI !

About CHI, GUI and stuff.

Debugging JavaScript on Facebook

leave a comment »

I’m not going to be a man of many words today.. So let’s just get started.

On Firefox there is of course Firebug to help you debug your code, you can easily log your messages with the console.log(args) function. On Safari (and especially Webkit Nightly) you have Web Inspector built-in that works pretty much the same as Firebug. (And besides if your code works on Firefox, there’s a big chance it’ll work on Webkit.) So no real problems here. If you know how the sandbox of Facebook works you’ll be debugging your JavaScript in no time.

But of course this leaves out the browser with the largest market share.. Internet Explorer. I ran into a few problems when I tried to debug my code in IE7. I There wasn’t any descent JavaScript debugger available. I tried installing the Internet Explorer Developer Toolbar released by Microsoft but it didn’t seem to have any features for JavaScript debugging.. But it did give me an overview of the DOM structure. (Step 1)

To get descent error messages I installed Microsoft Visual Web Developer 2008 Express Edition. I’m not going into any details how to set this up. Just check out this blogpost for more details. Now you can easily track your JavaScript errors in JavaScript. (Step 2)

So now if only we had a way to display the content of variables. Since Facebook disabled the alert(msg) function it’s pretty hard to show simple information. I was thinking that it would be a lot nicer if I had some sort of function to display a bit more information about our variables. That’s why I created the simple fbDebug.js. Don’t expect anything fancy. I just looked on the web for a JavaScript clone of the popular print_r function in PHP. And wrote some code around it to make it easy to use on Facebook apps.

Here’s how it works.

  • You include the fbDebug.js file first, so it loads before other JavaScript files.
  • From now on you can easily call the $debug(args) function.
    • You can add any number of arguments.

    The function will now create an element with ID ‘fbDebug’ to your page and print information about your variables here. Or if the element already exists. It will overwrite its content with the information.

Example:

Let’s imagine that we have a class like this:

function Test() { this.i = 5; }
Test.prototype.doSomething = function() {}

And a DOM Element like this:

<pre id="fbDebug" />

Then this code:

$debug('Hello', 20, [123, "World"], new Test(), document.getElementById('fbDebug'));

Would result in:

"Debug :
  [0] : (string) hoi
  [1] : (number) 20
  [2] : (array) :
    [0] : (number) 123
    [1] : (string) World
  [3] : (object) :
    [doSomething] : (function) function() {}
    [i] : (number) 5"
  [4] : (object) <PRE#fbDebug>

Now we have completed our (Step 3). And now we can begin debugging our JavaScript code in a decent Internet Explorer Environment. I’m not going into any more details. But if you have any questions or remarks. Just shoot.

Advertisements

Written by Dries Janssens

April 13, 2009 at 5:26 pm

Posted in 1

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: