IE Developer Tools Jonathan Seitel Program Manager.
-
Upload
elisabeth-rodgers -
Category
Documents
-
view
220 -
download
0
description
Transcript of IE Developer Tools Jonathan Seitel Program Manager.
![Page 1: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/1.jpg)
IE Developer ToolsJonathan SeitelProgram Manager
![Page 2: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/2.jpg)
Dev Tools: FoundationsIE8: it's not old, it's classic
![Page 3: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/3.jpg)
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.)
![Page 4: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/4.jpg)
Debugging: HTML and CSS
• View applied rules• Trace styles• View layout• Edit HTML and CSS• Save changes
![Page 5: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/5.jpg)
Debugging: JavaScript
• Execution control• Per-statement debugging
• Variable Inspection• Console, including console.log
support
![Page 6: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/6.jpg)
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
![Page 7: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/7.jpg)
7
Demo: T-Shirt Designer
• Quick compat checking• Thorough CSS tracing• Fast, easy JS debugging
![Page 8: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/8.jpg)
Debugging: Performance
• JavaScript 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
![Page 9: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/9.jpg)
9
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
![Page 10: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/10.jpg)
Dev Tools: HTML5 and BeyondThe future is here
![Page 11: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/11.jpg)
Debugging Improvements
• New elements and APIs, same power• XML, XHTML, SVG
• CSS directly from layout engine• JavaScript
• Word wrap• Go to line
![Page 12: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/12.jpg)
Performance
• View Source• HTML5 spec: Loads in <5s
• JS Debugging• Quite good for large JS files (>10 kloc)
• Navigation• Keep the dev tools open while you browse
![Page 13: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/13.jpg)
13
Demo: HTML5 T-Shirt Designer
• New Elements and APIs• Same dev tool constructs• Easy iteration of your new code
![Page 14: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/14.jpg)
Network Monitor
• Easily inspect headers, performance, and networking issues
![Page 15: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/15.jpg)
Network Monitor
• Capture all HTTP traffic• Inspect IE, AJAX, Flash, and Silverlight• Request timing graph• XML export (see: Fiddler talk)
![Page 16: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/16.jpg)
16
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
![Page 17: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/17.jpg)
Tips and TricksThings you'll love
![Page 18: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/18.jpg)
Inspecting Headers
![Page 19: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/19.jpg)
SVG Debugging
• Play with your SVG images in real-time
![Page 20: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/20.jpg)
Search with Selectors API
• Prefix your search string with '@' to use the W3C's Selectors API
![Page 21: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/21.jpg)
Customize View Source App
• Easily choose the built-in viewer, Notepad, or any other application without modifying the registry
![Page 22: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/22.jpg)
JS Debugging Within a Line
• Set breakpoints and step through each JavaScript statement, even when contained on the same line
![Page 23: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/23.jpg)
Syntax Coloring and Fonts
• Improved readability with syntax coloring and an excellent font: Consolas
![Page 24: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/24.jpg)
Keyboard Accessibility
• Extensive keyboard support• Complete reference:
http://msdn.microsoft.com/en-us/library/cc848896(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
![Page 25: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/25.jpg)
Color Picker
• Simple yet just what you need
![Page 26: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/26.jpg)
Resize Window
• Quick, exact window size testing
![Page 27: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/27.jpg)
27
Next Steps
• Press F12• Check out ietestdrive.com• Tell us what you think!
![Page 28: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/28.jpg)
Keep up on the latesthttp://blogs.msdn.com/ie
Meet the team in the Internet Explorer Lounge located in The
Commons!
Download the Internet Explorer 9 Platform previewwww.IETestDrive.com
![Page 29: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/29.jpg)
© 2009 Microsoft Corporation. All rights reserved.This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
![Page 30: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/30.jpg)
![Page 31: IE Developer Tools Jonathan Seitel Program Manager.](https://reader033.fdocuments.in/reader033/viewer/2022042707/5a4d1b657f8b9ab0599afd9f/html5/thumbnails/31.jpg)
© 2010 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.