Upload
thebeebs
View
10.666
Download
0
Tags:
Embed Size (px)
DESCRIPTION
For years web developers have used hacks, sweat and black magic to bend HTML and CSS into submission and now with Internet Explorer 9 F12 Developer Tools it just got a whole lot easier. In this session you will discover how you can use the new F12 Developer Tools to solve the most mysterious client side web development problems, fix compatibility issues and increase site performance. Using live demos we will investigate and experiment with the tools to demystify the inner behaviors of the browser, giving you the skills you need to build better websites. The video of this talk is here: http://channel9.msdn.com/events/mix/mix11/HTM18
Citation preview
Hacking with the F12 Developer Tools
Martin BeebyMicrosoft UK@thebeebs#MIXF12
Just Press F12
By Default the tools are loaded in at the bottomPress Ctrl+P to unpin and open in a separate window
Selecting Elements
You can inspect elements by clicking with the arrowNavigating through the HTMLYou can make edits to the page as you wishMost importantly you can save up any changes.Change rendering engine
Hacking HTML
Martin Beeby@thebeebs
demo
JavaScript
You can add breakpoints and debugYou can unminimise formatted JavaScriptHover over valuesView LocalsAdd Watches
Hacking JavaScript
Martin Beeby@thebeebs
demo
Tweeking that CSS
You can see how elements are inherited and overiddenYou can switch rules offYou can change rulesIf you want you can even edit the base style sheet.Of course you can save it tooYou can change numerical values by using the arrow keys
Hacking CSS
Martin Beeby@thebeebs
demo
Realtime JavaScript
Using the console you can execute JavaScript on the pageYou can include External Libraries
Use the Console to find out where you are
Martin Beeby@thebeebs
demo
Profiling your code
Find performance hogs quicklyCheck the call stack
Profiling your code
Martin Beeby@thebeebs
demo
Network Details
Discover what slow requestsExamine HeadersExamine Requests and responsesFind errors
Network tools
Martin Beeby@thebeebs
demo
The Other Gems
RulerColour PickerValidationResize PageDisable Script/CSS
Ruler
Colour Picker
Validation
Resize
Disable Stuff
Switch Back Notepad
Follow me @thebeebs
Slides athttp://www.ubelly.com/developerTools
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION
IN THIS PRESENTATION.