Hacking with the IE F12 developer tools

  • 10,130 views
Uploaded 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 …

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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
    Are you sure you want to
    Your message goes here
  • You can see the video of this talk over here: http://channel9.msdn.com/events/mix/mix11/HTM18
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

Total Views
10,130
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
16
Comments
2
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1.
  • 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
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 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
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 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
  • 30.
  • 31.
  • 32. Realtime JavaScript
    Using the console you can execute JavaScript on the page
    You can include External Libraries
  • 33.
  • 34.
  • 35.
  • 36. Use the Console to find out where you are
    Martin Beeby
    @thebeebs
    demo
  • 37.
  • 38. Profiling your code
    Find performance hogs quickly
    Check the call stack
  • 39. Profiling your code
    Martin Beeby
    @thebeebs
    demo
  • 40.
  • 41.
  • 42. Network Details
    Discover what slow requests
    Examine Headers
    Examine Requests and responses
    Find errors
  • 43. Network tools
    Martin Beeby
    @thebeebs
    demo
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 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.