IE Developer Tools Jonathan Seitel Program Manager Dev

IE Developer Tools Jonathan Seitel Program Manager

Dev Tools: Foundations IE 8: it's not old, it's classic

Key Benefits of IE Dev Tools • A visual interface to the platform • Remove black box around Trident • Debug where your bugs happen: in the browser • Included with IE • Fast experimentation • Reduce “edit, save, deploy, refresh” cycle • Spend more time adding features • (And less time fixing bugs. )

Debugging: HTML and CSS • View applied rules • Trace styles • View layout • Edit HTML and CSS • Save changes

Debugging: Java. Script • Execution control • Per-statement debugging • Variable Inspection • Console, including console. log support

Debugging: Compatibility • Easily change browser mode • Changes user agent string, version vector, default document mode • Easily change document mode • Affects how IE interprets a page

Demo: T-Shirt Designer • Quick compat checking • Thorough CSS tracing • Fast, easy JS debugging 7

Debugging: Performance • Java. Script Profiler • One click start/stop of profiler • Quickly see where application is spending time, including within built-in functions • Function or Call Tree View • Export data to file • Currently hooking up to our new, even faster scripting engine

Demo: Profiler • • Easy to compare side-by-side See which code paths are being hit Can help you spot patterns for optimization Easy export for deeper analysis 9

Dev Tools: HTML 5 and Beyond The future is here

Debugging Improvements • New elements and APIs, same power • XML, XHTML, SVG • CSS directly from layout engine • Java. Script • Word wrap • Go to line

Performance • View Source • HTML 5 spec: Loads in <5 s • JS Debugging • Quite good for large JS files (>10 kloc) • Navigation • Keep the dev tools open while you browse

Demo: HTML 5 T-Shirt Designer • New Elements and APIs • Same dev tool constructs • Easy iteration of your new code 13

Network Monitor • Easily inspect headers, performance, and networking issues

Network Monitor • • Capture all HTTP traffic Inspect IE, AJAX, Flash, and Silverlight Request timing graph XML export (see: Fiddler talk)

Demo: Network Monitor • Start capturing to listen to HTTP traffic • Applies to traffic from your entire app • Great high-level way of debugging network issues 16

Tips and Tricks Things you'll love

Inspecting Headers

SVG Debugging • Play with your SVG images in real-time

Search with Selectors API • Prefix your search string with '@' to use the W 3 C's Selectors API

Customize View Source App • Easily choose the built-in viewer, Notepad, or any other application without modifying the registry

JS Debugging Within a Line • Set breakpoints and step through each Java. Script statement, even when contained on the same line

Syntax Coloring and Fonts • Improved readability with syntax coloring and an excellent font: Consolas

Keyboard Accessibility • Extensive keyboard support • Complete reference: http: //msdn. microsoft. com/enus/library/cc 848896(VS. 85). aspx • Interoperable shortcuts with other tools where possible • Execution control shortcuts same as Visual Studio • Open/Close and navigating edit boxes same as Firebug

Color Picker • Simple yet just what you need

Resize Window • Quick, exact window size testing

Next Steps • Press F 12 • Check out ietestdrive. com • Tell us what you think! 27

Download the Internet Explorer 9 Platform preview www. IETest. Drive. com Meet the team in the Internet Explorer Lounge located in The Commons! Keep up on the latest http: //blogs. msdn. com/ie

© 2009 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.