Microsoft talks IE11 dev tools

Designed for productivity and varied setups, to boost browser-based iteration

Microsoft has released its IE11 developer preview for Windows 7 with "completely revised F12 developer tools" and promising better standards support.

From a design and development standpoint, IE10 offered a big boost regarding standards support. The upcoming IE11, available for Windows 8.1 and now also as a developer preview for Windows 7, continues in this manner, but has also overhauled the browser’s built-in developer tools.

.net spoke to Sandeep Singhal (SS), partner group program manager of Internet Explorer, about why the team reworked its developer tools so dramatically, and about the importance of such features within modern web browsers.

.net: Why did the team decide to overhaul the dev tools? What did it feel was lacking?
SS: As the web platform has grown more powerful with HTML5, CSS3, and other technologies, web developers have also evolved in how they build websites and web apps. In particular, web developers need to worry about the visual appearance of their sites and apps, as well as considerations such as performance and memory consumption. Developers need to target multiple devices with different screen resolutions and hardware capabilities.

The new F12 tools are designed with the modern web developer in mind. They support the iterative workflow that is typical of today’s web developer. They enable developers to quickly inspect, change and visualise content. The new F12 includes tools that support the kinds of things that web developers need to do today: visualise performance, analyse memory consumption, emulate page and app behaviour across multiple devices, and so on.

.net: For a web designer taking their first look at IE11, what things should they head to first and why?
SS: Our new F12 blog post gives a good starting point, and we also suggest trying out the F12 Adventure test drive. But some highlights include: UI responsiveness and memory profiling tools to help you build fast and fluid web apps; a live DOM explorer and CSS inspection tools that update with your page so you can iteratively explore how dynamic content is affecting layout or styles; and JavaScript debugging that starts quickly, without a page refresh, so you can get to work faster.

.net: How important was the interface of the new tools? What was the thinking behind the changes made there?
SS: The tools were designed with productivity in mind. For example, the tools are laid out to fit naturally with typical screen resolutions and with multi-monitor setups used by many web developers. The tools are natural extensions to the browser experience.

.net: Do you think there’s a sense the browser itself is becoming more important regarding development, if not for creating sites then at least for debugging and experimenting with an existing design?
SS: The browser has become the tool of choice for debugging and tuning web pages and apps, particularly as web developers tend to iterate rapidly. The F12 tools work hand-in-hand with an integrated development environment, such as Visual Studio, with common tools and shortcuts that allow developers to easily and naturally move back and forth between the IDE and the browser tools.