Your SlideShare is downloading. ×
Multi-mania: Hacking your way through website issues with F12 devtools
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Multi-mania: Hacking your way through website issues with F12 devtools

1,778
views

Published on

Slides from Multi-mania session on Internet Explorer 9 developer tools

Slides from Multi-mania session on Internet Explorer 9 developer tools


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,778
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Hacking your way through website issues with F12 Developer Tools Katrien De Graeve Developer Evangelist – Microsoft BeLux http://blogs.msdn.com/katriend/ @katriendg @ Multi-mania 24 May 2011
  • 2. Video • http://www.youtube.com/user/ubellyms#p /u/13/Gp-FQN_v3AM
  • 3. Agenda • IE9 F12 Developer tools overview • Validation and standards mode • HTML and CSS • Script, debugging and console, profiling • Network and performance
  • 4. F12 Overview • New in Internet Explorer 9 – Console tab – Network tab – Performance – Change User Agent string
  • 5. F12 DEVTOOLS OVERVIEW
  • 6. 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>
  • 7. VALIDATION & HTML5
  • 8. 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
  • 9. HACKING HTML & CSS
  • 10. JavaScript • Format minified JavaScript • Debug & Breakpoints – Conditional breakpoints – Watch – Hover over values • Console – Logging – Profiling
  • 11. Profiling code • Find performance hogs quickly • Check the call stack
  • 12. SCRIPT, PROFILING, CONSOLE
  • 13. Network • Discover slow requests • Examine Headers • View Cookies • Examine Requests and Responses • Find errors
  • 14. 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
  • 15. 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
  • 16. NETWORK
  • 17. Recommendations • Try out IE10 today • Test your sites on IE9 – User UA string changer – Play with document mode, test in IE7 and IE8 mode
  • 18. RESOURCES
  • 19. 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
  • 20. 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
  • 21. 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 blog http://blogs.msdn.com/belux • Join us on Facebook http://www.facebook.com/msdnbe http://www.facebook.com/msdnbelux • LinkedIn: http://linkd.in/msdnbelux/ • Twitter: @msdnbelux Download MSDN/TechNet Desktop Gadget http://bit.ly/msdntngadget
  • 22. THANK YOU

×