We recently released Internet Explorer Developer Channel, a fully functioning browser designed to give Web developers and early adopters a sneak peek at the Web platform features we’re working on.
As a web developer, I spend a lot of time using F12 tools to debug things on various sites. For instance, when I work on users’ feedbacks for babylon.js I often receive mails like this one: “Hey dude! My site is not working, please fix it. Here is the url….”
Because I’m a dedicated guy and because I love my users, I always try to help them “fix their site”. Most of the time they are using minified version of babylon.js and this leads us to my first point…
Syntax highlighting and pretty print
Over all features, the one I prefer when I debug using IE is the pretty print function associated with syntax highlighting. Because minified versions of libraries are just unreadable, IE allows you to prettify code using this little tool:
Pretty print will transform this:
The syntax highlighting greatly increases the readability. And ever better: you can put breakpoint in the prettified code and IE will keep it even when you reload the page.
Events breakpoints and tracepoints
Introduced with IE Dev Channel, this feature allows you to break when an event is raised! Extremely useful because you may not always know where an event handler is defined:
A tracepoint is similar to a breakpoint but instead of breaking into the debugger, a configurable trace will be emitted to the console:
Autocomplete is your friend!
IE F12 tools helps you by adding suggestions when you add a new watch:
Pretty simple but really convenient tool! You miss it when trying to debug with tools that do not have autocomplete option.
Emulating Windows Phone
Another extremely useful feature is the Windows Phone emulation. You can go to the emulation tab (Ctrl+8) and select Windows Phone browser profile, select and orientation and even the resolution:
The result is the following:
This often allows me to debug mobile website without having to use a complex infrastructure.
As a 3D engine developer, I spend a lot of time using this tool. It gives me a lot of detail on every rendering event. For instance in the following capture, I can see that I lost 0.026ms drawing the FPS on my scene
Events can be filtered and you can obviously zoom in the timeline to a more specific range of time.
When you want to get a specific item in your DOM, I find really useful to be able to pick it using my mouse:
Just by using the “Select element” tool you can move your mouse over the page and select the item you want to analyze. Simple and convenient.
And a lot of other cools features…
This is not an exhaustive list but just my favorite tools. I could also have talked about the memory profiler, the network profiler and all the great features they have.
You can find a complete list of great features introduced by IE Dev Channel for the F12 tools on this MSDN page:
And do not forget that IE Dev Channel also adds cool things like Gamepad API or Instances support for WebGL (That you can test on www.babylonjs.com site!)
So why not just give a try?