DEV348 - Debugging Pesky HTML5 Websites with F12 in Windows Internet Explorer 9

  • Article

This is a short recap of my presentation at TechEd, on . Video is here.

This talk was practical advice that came from solving several customer requests that started with: “my site broke with IE9”. The talk was short on slides, but included live debugging of several live sites (please don’t shoot the messenger if your site was demo’d).

The Outline:

  • F12 Developer Tool Overview
  • Issue Discovery Tactics
    • How to make sure you have valid HTML5
    • Hints from the console window
    • Changing the User-Agent
    • Changing the Document Mode
    • Lessons from the Network tab
  • Profiling
  • Search assistance
  • The Console Object
  • Other Assistance
    • Fiddler
    • SuperPreview

Want to make sure that I give some credit to The Beebs (aka. Martin Beeby, MS Developer Evangelist in the UK). At MIX, he presented a similar topic, and I leveraged a code snippet from him – and you should take note of this. As you might know, you can manipulate an existing HTML page with the F12 Developer Tools. And Martin showed me a handy little snippet to add JQuery to an existing page, so then you can use the console window to issue JQuery calls to the live page – which can come in handy.

    1: var headID = document.getElementsByTagName("head")[0];
    2: var newScript = document.createElement('script');
    3: newScript.type = 'text/javascript';
    4: newScript.src = 'https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js';
    5: headID.appendChild(newScript);