Why I love debugging my website with IE F12 tools - Eternal Coding - HTML5 / Windows / Kinect / 3D development - Site Home - MSDN Blogs

Why I love debugging my website with IE F12 tools


 

Why I love debugging my website with IE F12 tools

  • Comments 3

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.

You can grab it here alongside useful information about IE roadmap.

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:

image

Pretty print will transform this:

image

into this:

image

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:

image

A tracepoint is similar to a breakpoint but instead of breaking into the debugger, a configurable trace will be emitted to the console:

image

Autocomplete is your friend!

IE F12 tools helps you by adding suggestions when you add a new watch:

image

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:

image

The result is the following:

image

This often allows me to debug mobile website without having to use a complex infrastructure.

UI Responsiveness

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 Smile

image

 

Events can be filtered and you can obviously zoom in the timeline to a more specific range of time.

DOM Picking

When you want to get a specific item in your DOM, I find really useful to be able to pick it using my mouse:

image

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:

http://msdn.microsoft.com/en-us/library/ie/dn743687(v=vs.85).aspx

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? Smile

Leave a Comment
  • Please add 7 and 6 and type the answer here:
  • Post
  • For the Windows Phone emulation, are there any plans to also emulate (single) touch/stylus interactions?

  • For single touch you use the windows phone emulator that comes with Visual studio or simply use the mouse (pointer events gather all kind of inputs)

  • As a Microsoft employee I would think you would have problems if you said anything else but everything you use it for has been available in other browsers for years and works better there though, perhaps, I missed one.

Page 1 of 1 (3 items)