1. TechEd 2013
12/7/2018 9:56 AM
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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. 12/7/2018 9:56 AM
DEV-B313
Diagnostic Tips and Tricks for JavaScript Windows Store Applications using Visual Studio
Larry Guger
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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.

3. Agenda Debugging Tools Performance Tools
12/7/2018 9:56 AM
Agenda
Debugging Tools
Script and Native debugging simultaneously
Contract debugging
Debugging background tasks
Debugging installed applications without a Visual Studio project
Performance Tools
HTML UI Responsiveness tool
JavaScript profiler
JavaScript Memory Analyzer
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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.

4. Session Objectives And Takeaways
12/7/2018 9:56 AM
Session Objectives And Takeaways
Session Objectives:
Understand how to complete debugging scenarios for JavaScript Windows Store Apps
Understand the tools available for diagnosing performance issues in JavaScript Windows Store Apps
Multiple tools are available for JavaScript Windows Store Apps
Additional diagnostic tools are available in the Visual Studio 2012 quarterly updates
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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.

5. Debugging tools

6. I have options for “Native Only” and “Script Only” debugging
I have options for “Native Only” and “Script Only” debugging. What if I want to do both?

7. Demo
Debugging Native and JavaScript

8. Debugging Native and JavaScript
No Mixed Mode Debugging Support
Use Multiple Instances Instead
Launch the app under the script debugger
Attach with the native debugger from a second instance of VS
Visual Studio naturally gives focus to the correct instance
Cannot Debug JavaScript when stopped in the native debugger

9. Contract Debugging
Windows 8 contracts provide a new entry point for applications
It’s not the same code as just launching under the debugger
Simply attaching is not quick enough as you may have missed the code that you wanted to debug

10. Demo
Contract Debugging

11. Contract Debugging
Configure the app to debug without launch in the project properties
F5 the app
Invoke your application manually through the contract

12. Background Tasks
Your app can register to run background tasks when certain events happen
Some background tasks are straight forward to test and debug because you can trigger them manually
Others can be a much bigger pain
Like a maintenance trigger that fires after 8 hours

13. Demo
Background Task Debugging

14. Background Tasks
Trigger background tasks from the Debug Location Toolbar
Can trigger tasks on apps that are not running
Set them to debug without launching first
Can trigger tasks that do not require a payload

15. No Projects
There are several reasons why you may not have a VS project, but still want to debug
Permissions
Convenience
Normally build/deploy outside of VS
Attach to process is a pain for WWAs
Especially if you need to debug startup code!

16. Demo
Debugging without a Project

17. No Projects Use the “Debug Installed App Package Feature”
Works both local and remote
Can automatically stop at the first line of JavaScript Code

18. Performance tools

19. HTML UI Responsiveness tool
Shows work being done by subsystems of Internet Explorer related to UI
Helps to identify app startup performance and low frames per second caused by
Content loading
Layouts/CSS calculation
Script execution/garbage collection
Network latency
Overdrawing
Being added in VS 2012 Update #2
First public availability in Update #2 CTP3

20. Demo
HTML UI Responsiveness Tool

21. Visual Studio JavaScript profiler
Instrumentation-based profiling
Records how long every method takes to execute
Records exact counts of method calls
Only shows JavaScript execution time
Does not show work done by other systems (e.g., rendering or layout)

22. Profiler terminology
Inclusive time: The total amount of time from when the function was entered until the function exited
Includes the total time spent in all child functions
Exclusive time: The amount of time spent executing code in just the function body
Does NOT include time spent in child functions

23. Inclusive and exclusive time
function Alpha() {
Beta(); }
function Beta()
30 ms
Exclusive
Inclusive
Alpha
Beta 30 80 50 50
50 ms

24. Demo
Visual Studio JavaScript Profiler

25. Performance Analyzer for HTML5 Apps
Walks you through testing your application
Generates a report measuring 13 tenets of performance
Installs with the Windows 8 SDK
Activation time
Memory leaks
UI responsiveness
Idle state CPU usage
Layout passes
Successful suspend
Synchronous XMLHttpRequest on UI thread
Memory reduction when suspended
Image scaling
App memory growth
Memory footprint
Runtime broker memory growth
Runtime broker memory reference set

26. Demo
Performance Analyzer for HTML5 Apps

27. JavaScript Memory Profiler
Identify unintentionally retained memory and inefficient use of memory
Snapshot-based tool
Shows JavaScript and DOM elements
Size
Counts
Reference graph

28. Memory terminology Size: How large the object is in memory
Retained Size: The amount of memory that the object is preventing the garbage collector from reclaiming
Includes the size of the object
Includes the size of all referenced objects (and any objects they reference) that the current object is the only parent of in the memory graph

29. Size and retained size Object A (100 KB) Object A (100 KB)
Object C (50 KB)
Object B (500 KB)
Object B (500 KB)
Object D (100 KB)
Size
Retained Size
Object A
Object B
Object C
Object D
100 KB
600 KB
600 KB
500 KB
500 KB
50 KB
50 KB
100 KB
100 KB

30. Demo
JavaScript Memory Profiler

31. Questions?

32. In Review: Session Objectives And Takeaways
Understand advanced debugging techniques for JavaScript Windows Store Apps
Understand the tools available for diagnosing performance issues in JavaScript Windows Store Apps
Multiple tools are available for JavaScript Windows Store Apps
Additional diagnostic tools are available in the Visual Studio 2012 quarterly updates

33. Related Content Breakout Sessions/Chalk Talks Webcasts Documentation
DEV207 JavaScript: The Developer Experience
Webcasts
//build/ 3-008: Diagnosing performance and memory issues in JavaScript based Windows Store Apps:
Documentation
Visual Studio Profiler:
JavaScript Memory Analyzer:
Related Content
HTML5 Performance Analyzer:

34. Plan details and subscriber benefits
12/7/2018 9:56 AM
Plan details and subscriber benefits
Free Plan for up to 5 users
Included for certain paid MSDN subscribers:
Version control (TFVC or Git)
Comment on changesets & commits
Work item tracking and tagging
Team rooms
Agile planning tools
Feedback Management
Agile Portfolio Management*
Build*
Web-based test case management*
Load testing*
New!
Additional information at
* Capability in preview – limits may apply. Authoring load tests requires Visual Studio Ultimate 2013 Preview.
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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.

35. Learn more and activate today at http://aka.ms/AzureContest
MSDN Subscribers – Accelerate Your Development & Test using Cloud VMs We’ve enhanced the Windows Azure MSDN benefit and added cloud use rights for select MSDN software. You’ve already got it, now use it! 
Activate and try out your Windows Azure MSDN benefit today & you could win an Aston Martin V8 Vantage!
Learn more and activate today at

36. Resources Learning TechNet msdn http://channel9.msdn.com/Events/TechEd
12/7/2018 9:56 AM
Resources
Learning
Sessions on Demand
Microsoft Certification & Training Resources
TechNet
msdn
Resources for IT Professionals
Resources for Developers
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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.

37. Evaluate this session Scan this QR code to evaluate this session.
12/7/2018 9:56 AM
Required Slide
*delete this box when your slide is finalized
Your MS Tag will be inserted here during the final scrub.
Evaluate this session
Scan this QR code to
evaluate this session.
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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.

38. 12/7/2018 9:56 AM
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows 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.
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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.