1 / 17

F12 Developers Tools: Starting Time: 12:00

F12 Developers Tools: Starting Time: 12:00. New IE Developer Tools. Carl Edlund Partner Development Lead Jonathan Carter Senior Program Manager 2-066. Modern web apps include unique challenges at each stage of development…. Debugging complex JavaScript functionality

thi
Download Presentation

F12 Developers Tools: Starting Time: 12:00

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. F12 Developers Tools: Starting Time: 12:00

  2. New IE Developer Tools Carl Edlund Partner Development Lead Jonathan Carter Senior Program Manager 2-066

  3. Modern web apps include unique challenges at each stage of development… • Debugging complex JavaScript functionality • Designing rich, adaptive CSS-based layouts • Diagnosing issues with responsiveness/frame rates • Detecting memory leaks in long-running scenarios

  4. Agenda • Overview of IE’s developer tools(“F12”) and how they simplify web development challenges

  5. Demo – Diagnosing a presentation issue

  6. F12: DOM Explorer • Live DOM visualization that is fully-editable • Accurate reporting of matching CSS selectors/styles, including media queries, typo-detection and error handling • Productivity enhancers such as CSS auto-completion and source navigation

  7. Demo – Debugging a functional issue

  8. F12: Debugging • “Always on” (with no performance impact) • Streamlined UI which allows simultaneous inspection of locals, watches, call stack and console • Rich editor that supports pretty-printing, search markers, “data tips” and more • Powerful console with rich object visualization and workflow efficiency improvements such as auto-completion and shortcuts

  9. Demo – Diagnosing a responsiveness issue

  10. F12: UI Responsiveness • Visual timeline of app activity, including browser subsystem costs, and causality chains • Historical graphs depicting CPU utilization, frame rate, and app “events”

  11. Demo – Diagnosing memory usage

  12. F12: Memory • Take memory snapshots and investigate the diffs. • Workflow that highlights the distribution of counts, sizes, and object- identity unique to that app’s memory usage • Verify that your apps memory usage is ‘as you expected’

  13. F12: Summary • IE11 includes major investments in its developer tools • UX is optimized to support fast, iterative workflows, across all stages of web development • Modern app challenges are made easier with the support of accurate, actionable diagnostics

  14. Related Talks

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