29

Hacking with the IE F12 developer tools

  • Upload
    thebeebs

  • View
    10.666

  • Download
    0

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

Page 1: Hacking with the IE F12 developer tools
Page 2: Hacking with the IE F12 developer tools

Hacking with the F12 Developer Tools

Martin BeebyMicrosoft UK@thebeebs#MIXF12

Page 3: Hacking with the IE F12 developer tools

Just Press F12

By Default the tools are loaded in at the bottomPress Ctrl+P to unpin and open in a separate window

Page 4: Hacking with the IE F12 developer tools

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

Page 5: Hacking with the IE F12 developer tools

Hacking HTML

Martin Beeby@thebeebs

demo

Page 6: Hacking with the IE F12 developer tools

JavaScript

You can add breakpoints and debugYou can unminimise formatted JavaScriptHover over valuesView LocalsAdd Watches

Page 7: Hacking with the IE F12 developer tools

Hacking JavaScript

Martin Beeby@thebeebs

demo

Page 8: Hacking with the IE F12 developer tools

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

Page 9: Hacking with the IE F12 developer tools

Hacking CSS

Martin Beeby@thebeebs

demo

Page 10: Hacking with the IE F12 developer tools

Realtime JavaScript

Using the console you can execute JavaScript on the pageYou can include External Libraries

Page 11: Hacking with the IE F12 developer tools

Use the Console to find out where you are

Martin Beeby@thebeebs

demo

Page 12: Hacking with the IE F12 developer tools

Profiling your code

Find performance hogs quicklyCheck the call stack

Page 13: Hacking with the IE F12 developer tools

Profiling your code

Martin Beeby@thebeebs

demo

Page 14: Hacking with the IE F12 developer tools

Network Details

Discover what slow requestsExamine HeadersExamine Requests and responsesFind errors

Page 15: Hacking with the IE F12 developer tools

Network tools

Martin Beeby@thebeebs

demo

Page 16: Hacking with the IE F12 developer tools
Page 17: Hacking with the IE F12 developer tools
Page 18: Hacking with the IE F12 developer tools
Page 19: Hacking with the IE F12 developer tools
Page 20: Hacking with the IE F12 developer tools
Page 21: Hacking with the IE F12 developer tools

The Other Gems

RulerColour PickerValidationResize PageDisable Script/CSS

Page 22: Hacking with the IE F12 developer tools

Ruler

Page 23: Hacking with the IE F12 developer tools

Colour Picker

Page 24: Hacking with the IE F12 developer tools

Validation

Page 25: Hacking with the IE F12 developer tools

Resize

Page 26: Hacking with the IE F12 developer tools

Disable Stuff

Page 27: Hacking with the IE F12 developer tools

Switch Back Notepad

Page 28: Hacking with the IE F12 developer tools

Follow me @thebeebs

Slides athttp://www.ubelly.com/developerTools

Page 29: Hacking with the IE F12 developer tools

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