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

2. Hacking with the F12 Developer Tools Martin Beeby Microsoft UK @thebeebs #MIXF12

3. Just Press F12 By Default the tools are loaded in at the bottom Press Ctrl+P to unpin and open in a separate window

4. Selecting Elements You can inspect elements by clicking with the arrow Navigating through the HTML You can make edits to the page as you wish Most importantly you can save up any changes. Change rendering engine

5. Hacking HTML Martin Beeby @thebeebs demo

17. JavaScript You can add breakpoints and debug You can unminimise formatted JavaScript Hover over values View Locals Add Watches

18. Hacking JavaScript Martin Beeby @thebeebs demo

28. Tweeking that CSS You can see how elements are inherited and overidden You can switch rules off You can change rules If you want you can even edit the base style sheet. Of course you can save it too You can change numerical values by using the arrow keys

29. Hacking CSS Martin Beeby @thebeebs demo

32. Realtime JavaScript Using the console you can execute JavaScript on the page You can include External Libraries

36. Use the Console to find out where you are Martin Beeby @thebeebs demo

38. Profiling your code Find performance hogs quickly Check the call stack

39. Profiling your code Martin Beeby @thebeebs demo

42. Network Details Discover what slow requests Examine Headers Examine Requests and responses Find errors

43. Network tools Martin Beeby @thebeebs demo

49. The Other Gems Ruler Colour Picker Validation Resize Page Disable Script/CSS

50. Ruler

51. Colour Picker

52. Validation

53. Resize

54. Disable Stuff

55. Switch Back Notepad

56. Follow me @thebeebsSlides athttp://www.ubelly.com/developerTools

57. © 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.