Multi-mania: Hacking your way through website issues with F12 devtools
•Transferir como PPTX, PDF•
0 gostou•1,632 visualizações
Slides from Multi-mania session on Internet Explorer 9 developer tools
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Multi-mania: Hacking your way through website issues with F12 devtools
Semelhante a Multi-mania: Hacking your way through website issues with F12 devtools (20)
Mais de Katrien De Graeve
Mais de Katrien De Graeve (9)
Multi-mania: Hacking your way through website issues with F12 devtools
- 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
- 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
- 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>
- 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
- 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