Making the Internet Explorer JavaScript tools better

Wednesday, Mar 2, 2011 2 minute read Tags: ie9 javascript web web-dev
Hey, thanks for the interest in this post, but just letting you know that it is over 3 years old, so the content in here may not be accurate.

Previously I’ve blogged about a limitation of console.assert from the IE9 developer tools. Also recently Tatham Oddie blogged some overall thoughts on improving IE9 for developers and I decided to elaborate some thoughts I’ve got around the JavaScript developer tools.

JavaScript developer tools are a very important part of my toolbox, I really am quite a JavaScript fan (as you may know if you read my blog), so when I find something that irks me it really irks me.

  • Object inspection

  • When you want to inspect an object in dev tools my first thought is to dump it into the console. While the object will dump out it’s not great, if you have nested objects they’ll produce the nice [object Object], also you can’t expand/ collapse the object like with other browsers. If you want to do that you need to put it into the Watch window. This multi-step process is a bit tedious, particularly if you’re prototyping something like jQuery selectors or defining objects on the fly.

  • Code completion

  • This is something that I’ve noticed in recent versions of Firebug and the Chrome developer tools and it’s really handy, being able to use intellisence on a JavaScript object.

  • Console clearing

  • There doesn’t seem to be a way to clear the console other than calling console.clear().

  • Locals & Call Stack outside of debugging

  • I’m not quite sure when you’d use those tabs on the Script window when you’re not in a debugging session.

  • No cross-tab interaction

  • With Chrome and Firebug when you drop a DOM object in the console and you hover over it the element reacts on the browser. This is really useful, especially when working with something like jQuery.

  • jQuery inspection

  • A jQuery selector will return an array, but it’s also an object literal, meaning it’s been augmented with a number of non-array properties. That stuff isn’t what you’re interested in, you just want the selector results. I’d much prefer that it is treated as just an array and the extended properties are ignored.

Wrapping up

Mostly what I’ve outlined here is nit-picking on the developer tools, they are better than the previous versions and here’s hoping they take some inspiration from the other browsers.