The Firefox Debugger is a Den of Lies ( Canvas.getImageData )

I’ve become accustomed to my best friend in javascript development being Firebug. Even though Firefox has become a worse browsing choice than Chrome, I always develop in it because FireBug still makes me much happier than the chrome inspector.

But last night I lost an hour or so because I forgot one of the oldest rules of javascript development: Sometimes it lies.

I was modifying a friend’s loader to get the pixel data out of an image to accept elements that were already loaded into the DOM. This is what I had:

function getImageData(img) {
    var ctx = document.createElement('canvas').getContext('2d');
    ctx.width = img.width;
    ctx.height = img.height;
    ctx.drawImage(img,0,0);
    var res = ctx.getImageData(0, 0, img.width, img.height);
    // debugger;
    return res;
}

…but when I was testing it, res there was very much an empty object. Then started the gnashing of teeth and recoding and the step-by-step debugging.

After I threw in the Towel of Pride, Daniel provided a sanity check and found that res did indeed hold the specific object I was looking for.

So what gives?

Apparently, javascript ImageData objects have a defined toString() returning “Object { }”.

I find toString overloads of this type to be a terrible throwback to the dark ages of javascript. I should’ve realized that what it said wasn’t actually an empty object (which would’ve been represented as just “{}”) but in fact was a much more insidious manifestation of the old “[object Object]” which plagued javascript alert() messages for years.

Please, developers, if you make a toString() overload for your javascript objects, make them read like they contain data. :(

Also read...

Comments

  1. For what it’s worth,Chrome’s toString() on ImageData returns “[object ImageData]”.

    Which isn’t that much better, really, but it at least doesn’t look like an erroneous object.

    A while back I consciously decided to make the Firefox -> Chrome jump, and while it’s not as painful as switching back to IE for development, I still find that I actually like Chrome’s tools better in most respects.

  2. Good observation. I’m curious what you prefer in Firebug? Other than having many extensions to Firebug, and having much better ajax debugging, I find Firebug worse than Chromium’s debugger. It can’t have a console show always below every debugging tab, and worse yet, it often causes malfunctions on pages with complex jQuery and javascript.

  3. Luke: I think it’s just the subtle UX differences between Firebug and Chrome Inspector. I’ve built up my habits in Firebug for years, and CI is similar enough that it doesn’t trigger a different mode in my habits, and I’ll end up wiping out changes I made dynamically to the DOM sometimes.

    (Which is annoying.)

Leave a Reply

Your email address will not be published. Required fields are marked *