Download presentation
Presentation is loading. Please wait.
Published byElisabeth Rodgers Modified over 8 years ago
1
IE Developer Tools Jonathan Seitel Program Manager
2
Dev Tools: Foundations IE8: it's not old, it's classic
3
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.)
4
Debugging: HTML and CSS View applied rules Trace styles View layout Edit HTML and CSS Save changes
5
Debugging: JavaScript Execution control Per-statement debugging Variable Inspection Console, including console.log support
6
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
7
Demo: T-Shirt Designer Quick compat checking Thorough CSS tracing Fast, easy JS debugging 7
8
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
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 9
10
Dev Tools: HTML5 and Beyond The future is here
11
Debugging Improvements New elements and APIs, same power XML, XHTML, SVG CSS directly from layout engine JavaScript Word wrap Go to line
12
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
13
Demo: HTML5 T-Shirt Designer New Elements and APIs Same dev tool constructs Easy iteration of your new code 13
14
Network Monitor Easily inspect headers, performance, and networking issues
15
Network Monitor Capture all HTTP traffic Inspect IE, AJAX, Flash, and Silverlight Request timing graph XML export (see: Fiddler talk)
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 16
17
Tips and Tricks Things you'll love
18
Inspecting Headers
19
SVG Debugging Play with your SVG images in real-time
20
Search with Selectors API Prefix your search string with '@' to use the W3C's Selectors API
21
Customize View Source App Easily choose the built-in viewer, Notepad, or any other application without modifying the registry
22
JS Debugging Within a Line Set breakpoints and step through each JavaScript statement, even when contained on the same line
23
Syntax Coloring and Fonts Improved readability with syntax coloring and an excellent font: Consolas
24
Keyboard Accessibility Extensive keyboard support Complete reference: http://msdn.microsoft.com/en- us/library/cc848896(VS.85).aspxhttp://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
25
Color Picker Simple yet just what you need
26
Resize Window Quick, exact window size testing
27
Next Steps Press F12 Check out ietestdrive.com Tell us what you think! 27
28
Keep up on the latest http://blogs.msdn.com/ie Meet the team in the Internet Explorer Lounge located in The Commons! Download the Internet Explorer 9 Platform preview www.IETestDrive.com
29
© 2009 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.