Debugging your Metro style apps using HTML Jeff Fisher amp Erik Saltwell Microsoft Corporation TOOL514T Agenda Big picture Debugging JavaScript with Visual Studio Debugging CSS with Expression Blend ID: 767963
Download Presentation The PPT/PDF document "Debugging your Metro style apps using HT..." is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Debugging your Metro style apps using HTML Jeff Fisher &Erik SaltwellMicrosoft Corporation TOOL-514T
Agenda Big pictureDebugging JavaScript with Visual StudioDebugging 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 c ontain 2 language systems Imperative languages JavaScript & other WinRT languages Focus on app logic, data structures and algorithms Declarative languages HTML & CSS Used to declare the structure of your user interface
JavaScript: a hard imperative coding language Loosely typedExtremely 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 appBreak into scriptJavaScript console DOM explorer
Debugging the Stocks app with Visual Studio d emo
Things to remember Launch with debuggingdebugger 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 d emo
Things t o 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
Feedback and q uestions http://forums.dev.windows.com Session f eedback http ://bldw.in/SessionFeedback t hank you
© 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!