Embed Size (px)
DESCRIPTION
Slides from Multi-mania session on Internet Explorer 9 developer tools
Citation preview
Hacking your way through website issues with F12 Developer Tools
Katrien De GraeveDeveloper Evangelist – Microsoft BeLuxhttp://blogs.msdn.com/katriend/@katriendg
@ Multi-mania24 May 2011
Video
• http://www.youtube.com/user/ubellyms#p/u/13/Gp-FQN_v3AM
Agenda
• IE9 F12 Developer tools overview• Validation and standards mode• HTML and CSS • Script, debugging and console,
profiling• Network and performance
F12 Overview
• New in Internet Explorer 9– Console tab– Network tab– Performance– Change User
Agent string
DEMOF12 DEVTOOLS OVERVIEW
Standards and validation
• Internet Explorer Document mode• HTML5 page
<!DOCTYPE html><html lang="en"><head> <title></title> <meta charset="utf-8"></head><body>
</body></html>
DEMOVALIDATION & HTML5
HTML and CSS
• DOM tree• Select elements• See how elements are inherited and
overridden, trace styles• Switch rules off and on• Change rules• Edit and save HTML, style sheets• Save back to local file
DEMOHACKING HTML & CSS
JavaScript
• Format minified JavaScript• Debug & Breakpoints– Conditional breakpoints–Watch– Hover over values
• Console– Logging – Profiling
Profiling code
• Find performance hogs quickly• Check the call stack• Save the report to CSV• Functions view vs. Call Tree view• Add other columns with right-click• Jump to source view
DEMOSCRIPT, PROFILING, CONSOLE
Network
• Discover slow requests• Examine Headers• View Cookies• Examine Requests and Responses• Find errors
Network Tab
• A subset of Fiddler, and a little different• Multiple issues could be found
– Network, server, caching, mime-type, resource location
• Green - onDomContentLoaded• Red – OnLoad event
F12 Network Tab compared to Fiddler
F12 Network Tab Fiddler
Display cache and network requests Display and modify only network requests
Shows downloads from current process Shows traffic from all processes
6-connections-per-host limit 12-connections-per-proxy limit
Shows post-decryption HTTPS traffic Decrypts HTTPS traffic via “man-in-the-middle” approach
Excellent JavaScript Formatter Plugin (weak)
Less explicit mixed-content detection
Exports F12 NetworkData.xml Imports F12 NetworkData.xml
DEMONETWORK
Recommendations
• Try out IE10 today• Test your sites on IE9– User UA string changer– Play with document mode, test in IE7 and
IE8 mode
• Validation• Check for warnings in the Console• Test page as a different browser
(sniffing issue)
RESOURCES
Try it out
• Try out IE10 Platform Preview:– http://ietestdrive.com/
• Download IE9: – http://msdn.microsoft.com/ie/
• Read the IE Internals blog: – http://blogs.msdn.com/b/ieinternals/
• Demos Beauty of the Web:– http://www.beautyoftheweb.com
Resources
• http://blogs.msdn.com/b/ieinternals/• http://www.htmlgoodies.com/html5• http://msdn.microsoft.com/en-us/library/
gg130952(v=VS.85).aspx
• Fiddler: – http://www.fiddler2.com/fiddler2/version.asp
• http://www.ubelly.com/developerTools• Expression Web SuperPreview– http://www.microsoft.com/expression
Stay up to date with MSDN Belux• Register for our newsletters and stay up to date:
http://www.msdn-newsletters.be– Technical updates– Event announcements and registration– Top downloads
• Follow our bloghttp://blogs.msdn.com/belux
• Join us on Facebookhttp://www.facebook.com/msdnbehttp://www.facebook.com/msdnbelux
• LinkedIn: http://linkd.in/msdnbelux/ • Twitter: @msdnbelux
Download MSDN/TechNet Desktop Gadget
http://bit.ly/msdntngadget
THANK YOU
