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

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);