1. Debugging your Metro style apps using HTML
11/16/ :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.

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
JavaScript & other WinRT languages
Focus on app logic, data structures and algorithms
HTML & CSS
Used to declare the structure of your user interface

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. Debugging the Stocks app with Visual Studio
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 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

19. Debugging styles with Blend
demo
Debugging styles with Blend

20. 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

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 feedback

25. 11/16/ :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.

26. Meet us outside for questions!