1 / 27

Debugging your Metro style apps using HTML

TOOL-514T. Debugging your Metro style apps using HTML. Jeff Fisher & Erik Saltwell Microsoft Corporation. Agenda. Big picture Debugging JavaScript with Visual Studio Debugging CSS with Expression Blend You’ll leave with examples of how to Use VS for debugging

kyran
Download Presentation

Debugging your Metro style apps using HTML

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. TOOL-514T Debugging your Metro style apps using HTML Jeff Fisher & Erik Saltwell Microsoft Corporation

  2. Agenda • Big picture • Debugging JavaScript with Visual Studio • Debugging CSS with Expression Blend You’ll leave with examples of how to • Use VS for debugging • Use Blend for diagnosing CSS issues

  3. The big picture

  4. Debugging JavaScript apps is !@#$%^ hard!

  5. JavaScript apps contain 2 language systems Imperative languages Declarative languages HTML & CSS Used to declare the structure of your user interface • JavaScript & other WinRT languages • Focus on app logic, data structures and algorithms

  6. JavaScript: a hard imperative coding language • Loosely typed • Extremely flexible • Tooling still being refined

  7. As hard as JavaScript debugging is, CSS debugging is often harder!

  8. Imperative code (function () { ‘use strict’; //Uncomment the following line to enable first chance exceptions. //Debug.enableFirstChanceException(true); WinJS.Application.onmainwindowactivated =function (e) { if(e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { var body = document.querySelector(‘body’); var msg = ‘hello world!!’; body.innerText = msg; } } WinJS.Application.start(); })();

  9. Imperative code (function () { ‘use strict’; //Uncomment the following line to enable first chance exceptions. //Debug.enableFirstChanceException(true); WinJS.Application.onmainwindowactivated =function (e) { if(e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { var body = document.querySelector(‘body’); var msg = ‘hello world!!’; body.innerText = msg; } } WinJS.Application.start(); })();

  10. Imperative code (function () { ‘use strict’; //Uncomment the following line to enable first chance exceptions. //Debug.enableFirstChanceException(true); WinJS.Application.onmainwindowactivated =function (e) { if(e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { var body = document.querySelector(‘body’); var msg = ‘hello world!!’; body.innerText = msg; } } WinJS.Application.start(); })();

  11. Imperative code (function () { ‘use strict’; //Uncomment the following line to enable first chance exceptions. //Debug.enableFirstChanceException(true); WinJS.Application.onmainwindowactivated =function (e) { if(e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { var body = document.querySelector(‘body’); var msg = ‘hello world!!’; body.innerText = msg; } } WinJS.Application.start(); })();

  12. Declarative code

  13. Debugging with Visual Studio

  14. Debugging with Visual Studio • Launch your app • Break into script • JavaScript console • DOM explorer

  15. demo Debugging the Stocks app with Visual Studio

  16. Things to remember • Launch with debugging • debugger keyword • Debug.enableFirstChanceException(true); • JavaScript console • DOM explorer

  17. Debugging with Blend

  18. Debugging with Blend • Where you will learn to… • Understand your CSS with theWinning Rule and Show Set Properties mode • Debug device-state issues with the Platform and Styles Panes • Catch grid layout issues with Grid Adorners • Find parser-generated elements with the Live DOM • Diagnose post-interaction problems with Interactive Mode

  19. demo Debugging styles with Blend

  20. Things to remember… • Understand your CSS with theWinning Rule and Show Set Properties mode • Debug device-state issues with the Platform and Styles Panes • Catch grid layout issues with Grid Adorners • Find parser-generated elements with the Live DOM • Diagnose post-interaction problems with Interactive Mode

  21. Wrapping up

  22. Related sessions • [TOOL-486T] A deep dive into Expression Blend for designing Metro style apps using HTML • [TOOL-588T] Debugging connected Windows 8 apps • [TOOL-820F] What's new in Visual Studio 11 • [PLAT-873T] Designing Metro style apps using CSS3

  23. Further reading and documentation • QuickStart: Debugging JavaScript apps

  24. thank you Feedback and questions http://forums.dev.windows.com Session feedbackhttp://bldw.in/SessionFeedback

  25. © 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.

  26. Meet us outside for questions!

More Related