Inspecting & debugging using IE’s new F12 developer tools 

Will Kennedy@awillkKennedy.William@microsoft.comProgram Manager 2

Andy Sterland@andysterlandAndy.Sterland@microsoft.comSenior Program Manager4-073

Agenda• Demo: DOM Exploration, Style Inspection and

Emulation• Inspect and debug HTML/CSS issues• Build sites that work across a range of devices

• Demo: JavaScript debugging and instrumentation• Debug a modern JavaScript app• Instrument your sites for easier debugging• Productivity tips

• Review

#F12Tools

Contoso is using the DOM Explorer, Style Inspector and Emulation tools to build and debug an app that works across a broad range of devices.

Demo: DOM Exploration, Style Inspection and Emulation

Right-click, inspect elementLive DOMDrag-and-dropUndoEvents

DOM Explorer

CSS IntelliSenseUndo@media rulesComputed styles

Style Inspection

Accurate form factor emulationUser-agent stringsStreamlined document modesGPS emulation

Emulation

Vastly improved core workflows in the DOM ExplorerEliminated top developer pain pointsEmulation tools enable building across form factors

Demo Summary

Contoso’s new web app relies on JavaScript to drive much of its interactivity. With the new F12 developer tools they can debug, instrument, and interact with their app.

Demo: JavaScript debugging and instrumentation

No-refresh debuggingModern debugger featuresRun to cursor; set next statementWeb worker debuggingTrace Points

Debugger

Available in every tabPowerful REPLVisualizersIntelliSense

Console

Expanded logging featuresProfiling

Instrumentation

Modern debuggerPowerful consoleExpanded instrumentation APIs

Demo Summary

Review• Building and debugging layouts• Debugging and instrumenting applications• Addressed top developer pain points• Improved core workflows• Download IE11 Preview and send us your

feedback

Send Us Your Feedback!

Twitter: #F12ToolsBlog: IE Blog (http://blogs.msdn.com/b/ie/)

Visual Studio’s User Experience team would like feedback from web developers using IE or Chrome. Please contact vsdr@microsoft.com to participate in future studies. Or go to Room 254 South Moscone, West Mezzanine Level

For more information on building great sites

Related TalksID Title

2-066 New IE Developer Tools

2-067 New Platform Capabilities for Advancing Web Development

3-068 Web Runtime Performance

3-069 Web Compatibility and Same Markup

3-071 Lighting up your site on Windows 8.1

4-072 Hyper-fast web graphics with WebGL

4-073 Inspecting & Debugging Using IE’s New F12 Developer Tools 

Resourceshttp://modern.iehttp://blogs.msdn.com/b/ie/http://alistapart.com/article/responsive-web-designhttp://msdn.microsoft.com/ie

Evaluate this session

Scan this QR code to evaluate this session and be automatically entered in a drawing to win a prize!

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