Last week I had the pleasure to do a session at the biggest Belgian design and web development event: Multi-mania. My session covered an overview of Internet Explorer 9 developer tools (F12 devtools). With the release of Internet Explorer 9 and support for standards with many of HTML5’s umbrella of technologies, it’s important to take advantage of the latest features while making sure older sites stay compatible.
Developer tools are not new in IE9, but this updated version does bring some very welcome new features:
- Console tab
- Network tab
- Change User Agent string
Below you can find the slides for the session as well as recommended resources to learn how to use the tools.
Top recommended resources
- MSDN Reference: Developer tools articles and tutorials
- MSDN: Debugging script with developer tools
- Try out IE10 Platform Preview: http://ietestdrive.com/ (IE10 PP1 is a standalone application that does not interfere with any other IE version installed.)
- Download IE9: http://msdn.microsoft.com/ie/
- Read the IE Internals blog: http://blogs.msdn.com/b/ieinternals/
- Fiddler: http://www.fiddler2.com/fiddler2/version.asp
- MIX11 recorded sessions (Fiddler, HTML5, IE9 devtools): http://live.visitmix.com
- Demos Beauty of the Web: http://www.beautyoftheweb.com
- Used in demo: http://www.beatkeep.net
- http://www.giorgiosardo.com/HTML5/audio/Network.htm (Network tab)
Happy HTML5 coding and debugging!