1 / 28

Debugging Pesky HTML5 Websites with F12 in Windows Internet Explorer 9

DEV348. Debugging Pesky HTML5 Websites with F12 in Windows Internet Explorer 9. Jon Box Sr. Architect Evangelist, DPE Microsoft. Agenda. IE9 Developer Tools New Feature Highlights Initial Discovery Tactics Start with a valid page Hints from the console Changing user-agent

dore
Download Presentation

Debugging Pesky HTML5 Websites with F12 in Windows Internet Explorer 9

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. DEV348 Debugging Pesky HTML5 Websites with F12 in Windows Internet Explorer 9 Jon Box Sr. Architect Evangelist, DPE Microsoft

  2. Agenda • IE9 Developer Tools • New Feature Highlights • Initial Discovery Tactics • Start with a valid page • Hints from the console • Changing user-agent • Changing document mode • Lessons from Network Tab • Profiling • Other Assistance

  3. IE9 Developer Tools SummaryHelp is a click away • HTML • DOM tree • Edit, Save, Trace styles, layout, Attributes • CSS • Style sheet chooser, editing • Script Debugger • Breakpoint, Inspection, Stack • Console • Enter commands • Profiler • Start/stop, call tree, multiple reports • Exporting data • Search • Context sensitive by window • Selector syntax • Images • Disable, Show src, size, ALT, • View image report

  4. IE9 Developer Tools SummaryContinued • Cache tab • Browser cache, cookie information • Tools • Resize, UA String, Ruler, Color Picker, Outline Elements • Validation • HTML --> W3C • CSS --> W3C (Jigsaw) • Feeds --> feedvalidator.org • WCAG --> ContentQuality.Com • Section 508 --> ContentQuality.Com

  5. An Introduction demo

  6. Initial Discovery TacticsHelp is a F12 away • Start with a valid page • Hints from the console • Changing user-agent • Changing document mode • Lessons from Network Tab

  7. Valid HTML5 Syntax • <!DOCTYPE html> • <html lang="en"> • <head> • <title>Just ask the W3C</title> • <meta charset="utf-8"> • </head> • <body> • </body> • </html>

  8. Start with a Valid HTML5 page demo

  9. Hints From The ConsoleWhere there’s smoke, there might be fire • IE9 Standards Mode is more compliant • Just take a peek • Works on anyone’s site • Even the best can have unknown issues

  10. Hints From The Console, and Document Mode issues demo

  11. Search Is Your Friend • Context Sensitive • HTML, CSS, Script, Profiler, Network • Search across multiple resources • Selectors API for the HTML tab • @div, @div.myClassName • @.myClassName • @#myID

  12. Debugging Layout Issues Search, Selector, Style, Layout, edit attributes demo

  13. Network TabMore smoke signals • A subset of Fiddler, and a little different • Multiple issues could be found • Network, server, caching, mime-type, resource location • Green - onDomContentLoaded • Red – OnLoad event

  14. TimingsWhen and Where Did This Happen? • Wait – gap to request creation • Start – request initiation • Request - request transmission • Response – response transmission, and TTLB

  15. Request DetailsDetails about a specific resource request • More data about this request • Initiator tab is great for locating the source

  16. Lessons From The Network Tab demo

  17. ProfilingHow many times was getElementById called? • Measuring your code, other library, and DOM functions • Save the report to CSV • Functions view vs. Call Tree view • Add other columns with right-click • Jump to source view

  18. Console ObjectLogging and more await… • Ever used alert() for debugging ? • Only exists if tool is open • Check for existence, dummy up in wrapper, or remove code for production • Logging • log, info, warn, error (filtered view in console) • assert • clear • dir • Profiling • profile, profileEnd

  19. Profiling and Logging demo

  20. Other AssistanceOutside of IE • Fiddler, to get a deeper view • SuperPreview for validating your HTML5 across browsers

  21. In ConclusionThank You • Jon’s Recommended First Steps of Diagnosing • Validation • Check for warnings in the Console • Test page as a different browser (sniffing issue) • Test page with IE7 or IE8 standards mode • Check for issues in Network tab

  22. Required Slide Speakers, please list the Breakout Sessions, Interactive Discussions, Labs, Demo Stations and Certification Exam that relate to your session. Also indicate when they can find you staffing in the TLC. Related Content • DEV343 Application Development with HTML5 • WCL214 Windows Internet Explorer 9 in the Enterprise • DEV332 Enhancing Pinned Sites with Windows Internet Explorer 9 Find Me Later At the Innovation Booth • http://blogs.msdn.com/jonbox

  23. Web Track Resources • http://www.asp.net/ • http://www.silverlight.net/ • http://www.microsoft.com/web/gallery/ • http://www.iis.net/ • http://weblogs.asp.net/Scottgu/ • http://www.hanselman.com/blog/

  24. Resources • Connect. Share. Discuss. http://northamerica.msteched.com Learning • Sessions On-Demand & Community • Microsoft Certification & Training Resources www.microsoft.com/teched www.microsoft.com/learning • Resources for IT Professionals • Resources for Developers • http://microsoft.com/technet • http://microsoft.com/msdn

  25. Complete an evaluation on CommNet and enter to win!

  26. © 2011 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.

More Related