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

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

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

F12 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>

Validation & 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

Hacking 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

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, mime-type, resource location
Green - onDomContentLoaded
Red – OnLoad event

F12 Network Tab compared to Fiddler

network

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
DownloadMSDN/TechNet Desktop Gadgethttp://bit.ly/msdntngadget

Thank you

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

by Katrien De Graeve

Accessibility

Upload Details

Usage Rights

2 Embeds 90

Statistics

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

http://blogs.msdn.com	89
http://translate.googleusercontent.com	1