Starting Time 1200 New IE Developer Tools Carl Edlund Partner Development Lead Jonathan Carter Senior Program Manager 2066 Debugging complex JavaScript functionality Designing rich adaptive CSSbased layouts ID: 474182
Download Presentation The PPT/PDF document "F12 Developers Tools:" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1Slide2
F12 Developers Tools:
Starting Time: 12:00Slide3
New
IE Developer Tools
Carl Edlund
Partner Development Lead
Jonathan Carter
Senior Program Manager
2-066Slide4
Debugging complex JavaScript functionality
Designing rich, adaptive CSS-based layouts
Diagnosing issues with responsiveness/frame rates
Detecting memory leaks in long-running scenarios
Modern web apps include unique challenges at each stage of development…Slide5
Overview of IE’s developer tools
(“F12”) and how they simplify web development challenges
AgendaSlide6
Demo – Diagnosing a presentation issueSlide7
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 ExplorerSlide8
Demo – Debugging a functional issueSlide9
“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: DebuggingSlide10
Demo – Diagnosing a responsiveness issueSlide11
Visual timeline of app activity, including browser subsystem costs, and causality chains
Historical graphs depicting CPU utilization, frame rate, and app “events”
F12: UI ResponsivenessSlide12
Demo – Diagnosing memory usageSlide13
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: MemorySlide14
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 diagnosticsSlide15
Related Talks
ID
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 toolsSlide16
Evaluate this session
Scan this QR code
to evaluate this session and be automatically entered in a
drawing
to
win
a
prize!
Required Slide
*delete this box when your slide is finalized
Your MS Tag will be inserted here during the final scrub. Slide17