1 / 19

Mastering IE's F12 Developer Tools: Effective Debugging and Inspection Techniques

Join Andy Sterland and Will Kennedy as they showcase the capabilities of Internet Explorer's new F12 Developer Tools. Explore DOM Exploration, Style Inspection, and Emulation. Learn to effectively inspect and debug HTML/CSS issues, ensuring your sites work seamlessly across devices. With demos on JavaScript debugging and instrumentation, discover tips for productivity and improved workflows. Understand how tools like the DOM Explorer and the modern debugger enhance the development process for web applications. Ideal for developers seeking to streamline their debugging strategies.

colton
Télécharger la présentation

Mastering IE's F12 Developer Tools: Effective Debugging and Inspection Techniques

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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

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

  4. DOM Explorer • Right-click, inspect element • Live DOM • Drag-and-drop • Undo • Events

  5. Style Inspection • CSS IntelliSense • Undo • @media rules • Computed styles

  6. Emulation • Accurate form factor emulation • User-agent strings • Streamlined document modes • GPS emulation

  7. Demo Summary • Vastly improved core workflows in the DOM Explorer • Eliminated top developer pain points • Emulation tools enable building across form factors

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

  9. Debugger • No-refresh debugging • Modern debugger features • Run to cursor; set next statement • Web worker debugging • Trace Points

  10. Console • Available in every tab • Powerful REPL • Visualizers • IntelliSense

  11. Instrumentation • Expanded logging features • Profiling

  12. Demo Summary • Modern debugger • Powerful console • Expanded instrumentation APIs

  13. 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 

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

  15. Related Talks • For more information on building great sites

  16. Resources • http://modern.ie • http://blogs.msdn.com/b/ie/ • http://alistapart.com/article/responsive-web-design • http://msdn.microsoft.com/ie

  17. 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!

More Related