F12 Developers Tools:

Starting Time: 12:00

New IE Developer ToolsCarl EdlundPartner Development Lead

Jonathan CarterSenior Program Manager2-066

1. Debugging complex JavaScript functionality

2. Designing rich, adaptive CSS-based layouts

3. Diagnosing issues with responsiveness/frame rates

4. Detecting memory leaks in long-running scenarios

Modern web apps include unique challenges at each stage of development…

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

Agenda

Demo – Diagnosing a presentation issue

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

    

F12: DOM Explorer

Demo – Debugging a functional issue

“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

    

F12: Debugging

Demo – Diagnosing a responsiveness issue

Visual timeline of app activity, including browser subsystem costs, and causality chains

Historical graphs depicting CPU utilization, frame rate, and app “events”

    

F12: UI Responsiveness

Demo – Diagnosing memory usage

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’

F12: Memory

F12: SummaryIE11 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

Related TalksID Title

2-067 New Platform Capabilities for Advancing Web Development

3-068 Web Runtime Performance

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 

3-316 Developing high performance websites and modern apps with JavaScript performance tools

Evaluate this session

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

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