0
Hacking with the F12 Developer Tools<br />Martin Beeby<br />Microsoft UK<br />@thebeebs<br />#MIXF12<br />
Just Press F12<br />By Default the tools are loaded in at the bottom<br />Press Ctrl+P to unpin and open in a separate win...
Selecting Elements<br />You can inspect elements by clicking with the arrow<br />Navigating through the HTML<br />You can ...
Hacking HTML<br />Martin Beeby<br />@thebeebs<br />demo <br />
JavaScript<br />You can add breakpoints and debug<br />You can unminimise formatted JavaScript<br />Hover over values<br /...
Hacking JavaScript<br />Martin Beeby<br />@thebeebs<br />demo <br />
Tweeking that CSS<br />You can see how elements are inherited and overidden<br />You can switch rules off<br />You can cha...
Hacking CSS<br />Martin Beeby<br />@thebeebs<br />demo <br />
Upcoming SlideShare
Loading in...5
×

Hacking with the IE F12 developer tools

10,850

Published on

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 Comments
0 Likes
Statistics
Notes
  • I Got The Full File, I Just Wanna Share to You Guyszz.. It's Working You Can The Download The Full File + Instructions Here : http://gg.gg/setupexe
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • You can see the video of this talk over here: http://channel9.msdn.com/events/mix/mix11/HTM18
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
10,850
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
21
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Hacking with the IE F12 developer tools"

  1. 1.
  2. 2. Hacking with the F12 Developer Tools<br />Martin Beeby<br />Microsoft UK<br />@thebeebs<br />#MIXF12<br />
  3. 3. Just Press F12<br />By Default the tools are loaded in at the bottom<br />Press Ctrl+P to unpin and open in a separate window<br />
  4. 4. Selecting Elements<br />You can inspect elements by clicking with the arrow<br />Navigating through the HTML<br />You can make edits to the page as you wish<br />Most importantly you can save up any changes.<br />Change rendering engine<br />
  5. 5. Hacking HTML<br />Martin Beeby<br />@thebeebs<br />demo <br />
  6. 6.
  7. 7.
  8. 8.
  9. 9.
  10. 10.
  11. 11.
  12. 12.
  13. 13.
  14. 14.
  15. 15.
  16. 16.
  17. 17. JavaScript<br />You can add breakpoints and debug<br />You can unminimise formatted JavaScript<br />Hover over values<br />View Locals<br />Add Watches<br />
  18. 18. Hacking JavaScript<br />Martin Beeby<br />@thebeebs<br />demo <br />
  19. 19.
  20. 20.
  21. 21.
  22. 22.
  23. 23.
  24. 24.
  25. 25.
  26. 26.
  27. 27.
  28. 28. Tweeking that CSS<br />You can see how elements are inherited and overidden<br />You can switch rules off<br />You can change rules<br />If you want you can even edit the base style sheet.<br />Of course you can save it too<br />You can change numerical values by using the arrow keys<br />
  29. 29. Hacking CSS<br />Martin Beeby<br />@thebeebs<br />demo <br />
  30. 30.
  31. 31.
  32. 32. Realtime JavaScript<br />Using the console you can execute JavaScript on the page<br />You can include External Libraries<br />
  33. 33.
  34. 34.
  35. 35.
  36. 36. Use the Console to find out where you are<br />Martin Beeby<br />@thebeebs<br />demo <br />
  37. 37.
  38. 38. Profiling your code<br />Find performance hogs quickly<br />Check the call stack<br />
  39. 39. Profiling your code<br />Martin Beeby<br />@thebeebs<br />demo <br />
  40. 40.
  41. 41.
  42. 42. Network Details<br />Discover what slow requests<br />Examine Headers<br />Examine Requests and responses<br />Find errors<br />
  43. 43. Network tools<br />Martin Beeby<br />@thebeebs<br />demo <br />
  44. 44.
  45. 45.
  46. 46.
  47. 47.
  48. 48.
  49. 49. The Other Gems<br />Ruler<br />Colour Picker<br />Validation<br />Resize Page<br />Disable Script/CSS<br />
  50. 50. Ruler<br />
  51. 51. Colour Picker<br />
  52. 52. Validation<br />
  53. 53. Resize<br />
  54. 54. Disable Stuff<br />
  55. 55. Switch Back Notepad<br />
  56. 56. Follow me @thebeebsSlides athttp://www.ubelly.com/developerTools<br />
  57. 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.<br />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.<br />
  1. A particular slide catching your eye?

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

×