It’s been a big week for browsers. Opera 15 was launched, Chrome 28 was released, Firefox won awards and dropped JavaScript options. So it’s time to restore balance to the universe and show some love for IE!
The new features coming to IE11 have been well publicized. SPDY and WebGL: great. Better touch controls and SkyDrive synchronization: nice. Improved tabbing and live tiles: all good. But what we really need are better tools to help our day-to-day development … is Microsoft about to deliver some?
I’ve never been complimentary about IE’s Developer Tools. The first version for IE6 appeared in response to Firebug which had revolutionized in-browser testing. The toolbar was rushed and clunky but better than nothing. It received minor improvements through the IE versions but remained disappointing. The company which created VisualStudio couldn’t match the browser tools offered by competitors.
While IE11 won’t appear for a few months, the latest F12 Developer Tools have been completely overhauled. They look great and have some genuinely innovative features which could surpass the alternatives.
The first change you’ll notice is the ugly gray dialogs have been replaced by a great-looking modern interface:
Icons down the left lead to:
- a DOM explorer
- a message console (which is also available as an overlay)
- a JavaScript debugger
- a network tool
- a UI responsiveness profiler
- a script profiler
- a memory analysis tool
- an emulation tool to test small screens and GPS
So far, so Firebug. But there are some amazing features you won’t necessarily find elsewhere…
IntelliSense: auto-completion suggestions are available when editing live HTML attributes, CSS properties and JavaScript objects.
DOM drag & drop: nodes can be re-arranged and re-positioned in the live tree.
Event hinting: discover which event handlers have been applied to a DOM node.
Code de-minification: convert compressed or minified code to a more readable format.
Execution reversal: it’s not quite a time machine, but it’s possible to move the execution point backward!
Set next statement: skip over statements — a little like temporarily commenting them out.
Tracepoints: automatically log messages to the console — like issuing console.log() without needing to clutter your code.
Break on new worker: interrupts execution when a web worker is called.
Performance profiling: discover the most processor-intensive tasks and how they affect your page framerate.
Memory profiling: take snapshots of memory use, compare them with others, and determine which DOM nodes or JavaScript objects are consuming the most resources.
Perhaps the only missing feature is a tool to analyze HTML5 local storage. But Microsoft has a few weeks to sort that out…
Despite IE’s historical reputation, Microsoft is heading in the right direction. You may even demand IE11 to test your next web project!
Craig BucklerCraig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
