Debugging your Metro style apps using HTML 11/16/2018 11:36 AM TOOL-514T Debugging your Metro style apps using HTML Jeff Fisher & Erik Saltwell Microsoft Corporation © 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.
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
The big picture
Debugging JavaScript apps is !@#$%^ hard!
JavaScript apps contain 2 language systems Imperative languages Declarative languages JavaScript & other WinRT languages Focus on app logic, data structures and algorithms HTML & CSS Used to declare the structure of your user interface
JavaScript: a hard imperative coding language Loosely typed Extremely flexible Tooling still being refined
As hard as JavaScript debugging is, CSS debugging is often harder!
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(); })();
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(); })();
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(); })();
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(); })();
Declarative code
Debugging with Visual Studio
Debugging with Visual Studio Launch your app Break into script JavaScript console DOM explorer
Debugging the Stocks app with Visual Studio demo Debugging the Stocks app with Visual Studio
Things to remember Launch with debugging debugger keyword Debug.enableFirstChanceException(true); JavaScript console DOM explorer
Debugging with Blend
Debugging with Blend Where you will learn to… Understand your CSS with the Winning 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
Debugging styles with Blend demo Debugging styles with Blend
Things to remember… Understand your CSS with the Winning 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
Wrapping up
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
Further reading and documentation QuickStart: Debugging JavaScript apps
thank you Feedback and questions http://forums.dev.windows.com Session feedback http://bldw.in/SessionFeedback
11/16/2018 11:36 AM © 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. © 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.
Meet us outside for questions!