hacking with the ie f12 developer tools

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.