Making Internet Explorer Better for Developers

Here’s what my Start Bar looks like:

Screenshot of my start bar: Outlook, IE9, IE6, Firefox, Chrome, Safari, Opera, Visual Studio, Photoshop, Excel, MetroTwit, Communciator, Skype, Live Messenger

Specifically, you’ll notice that I have all the major browsers there as first class citizens. When I want to launch a browser, I just randomly move my mouse towards the bottom left of my screen and click which ever browser I hit first. As I write this post, I’m using four of them to browse the web. LastPass deals with my passwords and I don’t use bookmarks anyway.

I do this to maintain my knowledge of all the browsers, to help me be a better web developer.

For day-to-day browsing, this works fine. For development though, I find myself actively switching to Firefox just so I can use Firebug. On paper, Internet Explorer’s developer tools do everything Firebug does. In practice, I’ve just never liked them as much. Even with the current progress on consistent rendering, we need good development tools in all the browsers.

Over the last few days, I’ve been exclusively using the Internet Explorer 9 developer tools. I’ve noted each feature that I think needs work. Now, I want to add your feedback so that we can build a cohesive set of requests for the IE team. None of these suggestions will make it into the IE9 release, but now is a good time to get our feedback in before they commence planning for IE10.

General Browser

  • JS error dialog is annoying as hell – would be good to say “stop showing error dialogs” after the first one, and route the rest of the text to the console
  • Would be nice to be able to view JSON responses in the browser instead of getting a download prompt, just like XML

Console tab

HTML tab

  • Minor, but the HTML should really get renamed to DOM. It feels a bit silly telling people to go to the HTML tab when they want to see how an SVG is structured
  • Selecting an element in the DOM should outline it on the page
  • Can’t delete an element
  • Adding CSS properties in dev tools (should be able to do it from trace styles, not via attributes)
  • "Edit" button in DOM always seems to edit the wrong node
  • Typing style=" to add an attribute results in style="" which works against the habit
  • Rename "Trace Styles" to "Applied Styles" and make it the default
  • Rename "Style" to “Trace Styles” and make it second
  • Layout pane is too chunky – always have to make the dev tools bigger just to see it
  • With an active node in the DOM, need a way to get into the attribute editing via the keyboard only F2

Script tab

  • Whenever I hit “Start Debugging”, the dev tools undock and docking gets disabled. Seems unrelated and certainly annoying.

CSS tab

  • "This stylesheet cannot be viewed because its source is in a different domain than the page."

General dev tools

  • Why is there a "Clear Browser Cache" button in the HTML + CSS tabs? It’s already in the menu.
  • Why is Disable > Script not available? (It’s there, but greyed out.)
  • Consolas over Courier please.

What are you suggestions? Comment on this post.

I’m on the Microsoft campus in Seattle this week so I’ll be championing as many of these issues with the IE team as I can.