190 likes | 296 Views
Inspecting & debugging using IE’s new F12 developer tools. Andy Sterland @ andysterland Andy.Sterland@microsoft.com Senior Program Manager 4-073. Will Kennedy @ awillk Kennedy.William@microsoft.com Program Manager 2. #F12Tools. Agenda.
E N D
Inspecting & debugging using IE’s new F12 developer tools Andy Sterland @andysterland Andy.Sterland@microsoft.com Senior Program Manager 4-073 Will Kennedy @awillk Kennedy.William@microsoft.com Program Manager 2
#F12Tools 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
Demo: DOM Exploration, Style Inspection and Emulation • 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.
DOM Explorer • Right-click, inspect element • Live DOM • Drag-and-drop • Undo • Events
Style Inspection • CSS IntelliSense • Undo • @media rules • Computed styles
Emulation • Accurate form factor emulation • User-agent strings • Streamlined document modes • GPS emulation
Demo Summary • Vastly improved core workflows in the DOM Explorer • Eliminated top developer pain points • Emulation tools enable building across form factors
Demo: JavaScript debugging and instrumentation • 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.
Debugger • No-refresh debugging • Modern debugger features • Run to cursor; set next statement • Web worker debugging • Trace Points
Console • Available in every tab • Powerful REPL • Visualizers • IntelliSense
Instrumentation • Expanded logging features • Profiling
Demo Summary • Modern debugger • Powerful console • Expanded instrumentation APIs
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: #F12Tools • Blog: 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
Related Talks • For more information on building great sites
Resources • http://modern.ie • http://blogs.msdn.com/b/ie/ • http://alistapart.com/article/responsive-web-design • http://msdn.microsoft.com/ie
Required Slide *delete this box when your slide is finalized Your MS Tag will be inserted here during the final scrub. Evaluate this session • Scan this QR codeto evaluate this session and be automatically entered in a drawing to win a prize!