Hacking your way
through website issues
with F12 Developer Tools
Katrien De Graeve
Developer Evangelist – Microsoft BeLux
...
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, ...
F12 Overview
• New in Internet
Explorer 9
– Console tab
– Network tab
– Performance
– Change User
Agent string
F12 DEVTOOLS OVERVIEW
Standards and validation
• Internet Explorer Document mode
• HTML5 page
<!DOCTYPE html>
<html lang="en">
<head>
<title></t...
VALIDATION & HTML5
HTML and CSS
• DOM tree
• Select elements
• See how elements are inherited and
overridden, trace styles
• Switch rules off...
HACKING HTML & CSS
JavaScript
• Format minified JavaScript
• Debug & Breakpoints
– Conditional breakpoints
– Watch
– Hover over values
• Cons...
Profiling code
• Find performance hogs quickly
• Check the call stack
SCRIPT, 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, mim...
F12 Network Tab compared to
Fiddler
F12 Network Tab Fiddler
Display cache and network requests
Display and modify only net...
NETWORK
Recommendations
• Try out IE10 today
• Test your sites on IE9
– User UA string changer
– Play with document mode, test in ...
RESOURCES
Try it out
• Try out IE10 Platform Preview:
– http://ietestdrive.com/
• Download IE9:
– http://msdn.microsoft.com/ie/
• Re...
Resources
• http://blogs.msdn.com/b/ieinternals/
• http://www.htmlgoodies.com/html5
• http://msdn.microsoft.com/en-
us/lib...
Stay up to date with
MSDN Belux
• Register for our newsletters and stay up to date:
http://www.msdn-newsletters.be
– Techn...
THANK YOU
Upcoming SlideShare
Loading in...5
×

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

1,829

Published on

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,829
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 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. 2. Video • http://www.youtube.com/user/ubellyms#p /u/13/Gp-FQN_v3AM
  3. 3. Agenda • IE9 F12 Developer tools overview • Validation and standards mode • HTML and CSS • Script, debugging and console, profiling • Network and performance
  4. 4. F12 Overview • New in Internet Explorer 9 – Console tab – Network tab – Performance – Change User Agent string
  5. 5. F12 DEVTOOLS OVERVIEW
  6. 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. 7. VALIDATION & HTML5
  8. 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. 9. HACKING HTML & CSS
  10. 10. JavaScript • Format minified JavaScript • Debug & Breakpoints – Conditional breakpoints – Watch – Hover over values • Console – Logging – Profiling
  11. 11. Profiling code • Find performance hogs quickly • Check the call stack
  12. 12. SCRIPT, PROFILING, CONSOLE
  13. 13. Network • Discover slow requests • Examine Headers • View Cookies • Examine Requests and Responses • Find errors
  14. 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. 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. 16. NETWORK
  17. 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. 18. RESOURCES
  19. 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. 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. 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. 22. THANK YOU
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×