Inspecting & debugging using IE’s new F12 developer tools
Will [email protected]@microsoft.comProgram Manager 2
Andy [email protected]@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 [email protected] 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.