IE11 Preview and the New Developer Tools

Thursday, June 27, 2013

The Windows 8.1 preview includes a preview of Internet Explorer 11, which includes a new version of the F12 Developer Tools for inspecting, profiling, and debugging web sites.

The Good

The developer tools are now metrofied with flat buttons and an emphasis on content over window chrome. Although there are still a considerable number of icons and commands to press, it does seem easier to read and work with the information presented. All the important features are still here, though a few things seem to be missing (the ruler tool and link report as two examples), and they still behave the same and present the same information.

Dev Tools DOM Explorer

Update - yes, the DOM explorer tracks changes in real time now. Huge improvement!

The New

The emphasis is on performance with new “UI Responsiveness”, “Profiler”, and “Memory” sections.

The Memory tab is looking very useful for today’s apps and the heap snapshots are easier to use compared to the tools in other browsers. Likewise the code profiler is easy to work with and similar to the profiling tools for managed code in VS Ultimate.   

image

The “UI Responsiveness” tab is visually appealing and highly interactive but contains an enormous amount of information and will require some guidance and practice to use properly.

UI Responsive

The Missing

To get a full picture of what is happening on any given page, the IE dev tools will need to give us the ability to inspect local storage, session storage, IndexDB, and Application Cache. I didn’t find any of these in the current release.

Most worrisome is how there doesn’t appear to be any extensibility story for the tools. Framework oriented plugins for Knockout and Angular are popular in other browsers because they allow developers to work at a level above the code to see what is happening on a page. The ability to use simple HTML and JavaScript to create these types of plugins is what makes the other tools so popular. The IE dev tools will need a better extensibility story to keep web developers happy.


Comments
gravatar Elijah Manor Thursday, June 27, 2013
Yeah, I'm very glad to see many of the changes added to the DevTools and that they have been rewritten from scratch. I would also like to see ways to manage storage as you mentioned. My hope is that somehow the DevTools can be updated out-of-band from the main IE, but only time will tell. Extensibility would also be nice, but I haven't heard one way or another about that.
gravatar Roberto Hernandez Thursday, June 27, 2013
Great write up! I love the new looks, but without the missing features is going to be hard to adopt the IE F12 tools for day-to-day work. That being said, I am glad this tools are now part of the browser in Windows RT, they are huge upgrade over their predecessor.
gravatar Carl Camera Thursday, June 27, 2013
Glad to read about these improvements. I'm trying to get the preview installed but having a bit of a problem with my Dell laptop. Anyway I do have a burning question: Does the DOM view update in realtime now? That is, if AJAX calls are made or carousels slide, does the DOM window display those elements and (I'm assuming everyone is using jQuery these days) the element style attributes update accordingly?
gravatar Scott Thursday, June 27, 2013
@Carl: Yes, the DOM Explorer is real time now, which is a huge improvement. I'm used to seeing this work in other tools so I didn't think about it when I saw it in IE11 - so thanks for pointing that out!
gravatar Sirwan Afifi Thursday, June 27, 2013
wow!! it's great!
gravatar Carl Camera Thursday, June 27, 2013
Great news, Scott. Thanks for indulging my curiosity.
gravatar TanzeelurRehman Tuesday, July 2, 2013
It is great news. We expect more from Microsoft when the preview version of IE get lunched, but when the final product comes to the market, all is a buggy browser. But looking forward to check all these new improvements.
gravatar Ale Miralles Friday, July 5, 2013
For those doing type script development, I think the lack of source maps debugging it's a big no-go too ;)
gravatar Bruce Leggett Monday, July 15, 2013
I hope that Microsoft has improved the ability to change CSS style properties. It would be nice to have a color picker and be able to change CSS class property values within the Dev tools window with the changes immediately reflected in the browser window. This would result in HUGE productivity gains
Comments are closed.

My Pluralsight Courses

K.Scott Allen OdeToCode by K. Scott Allen
What JavaScript Developers Should Know About ECMAScript 2015
The Podcast!