By Colin Beales, Microsoft TechnicalEvangelist, Visual Studio

Writing beautiful applications requires an application to be both well designed with usability at the forefront, but beauty is only skin deep when an application performs poorly and leaves the user experience acting sluggishly and frustrating users that the beautiful design of an application is not met by its runtime performance.

Thankfully Visual Studio 2013 and Internet Explorer have some great features here to help application developers of Web, WPF and XAML based applications deliver on their runtime performance goals and look also to make applications run harmoniously on a device thinking about other unseen quality aspects

Let’s take a look at some of these tools available in IE and Visual Studio…

Web Applications

Internet Explorer 11 on Windows 7 and 8.1 have a new set of Developer Tools (F12). These give developers a comprehensive set of profiling tools including a new UI responsiveness and memory profiling tools to help you build fast and fluid web applications that do not determinate with leaked memory.

More details on these tools, including further debugging and tuning tools in Internet Explorer can be found in this post from the Internet Explorer team: http://blogs.msdn.com/b/ie/archive/2013/07/29/debugging-and-tuning-web-sites-and-apps-with-f12-developer-tools-in-ie11.aspx

Windows Store Applications

For Windows Store Applications a rich set of profiling tools are available from Visual Studio 2013 regardless of the platform that you choose to develop your applications with (XAML or HTML).

These tools are:

· HTML UI Responsiveness Tool – For use with Windows Store apps written with HTML and JavaScript this tooling helps to profile applications by providing visualisations of work undertaken on the UI thread. For users of the Internet Explorer F12 tools (detailed earlier in this post) will find this tooling familiar. For more detail check out Jonathan Carters great post: HTML UI Responsiveness tool in Visual Studio 2013.

· XAML UI Responsiveness Tool – This tooling serves users wanting to profile Windows Store apps written with C#/XAML and C++/XAML to provide visualizations of work undertaken on the UI thread. Again more information on this tooling is available through this great post by Pratap Lakshman: XAML UI Responsiveness tool in Visual Studio 2013.

· JavaScript Memory Profiler – Whilst this tool is not brand new (was introduced in VS2012.1) it is a great resource to understand your JavaScript memory usage patterns and identify memory leaks within your Windows Store applications. For further information our JavaScript tooling team have written a great blog: JavaScript memory analysis for Windows Store apps in Visual Studio 2012.

· Energy Consumption Tool – Beauty of an app goes further than just the look of an application. How an application utilizes resources will change a users perception of an application. To help application desirability in this area Visual Studio 2013 introduces tooling to help estimate your app’s energy consumption, without the need for any specialized hardware. For more information please read be sure to check out Shiv Prashant Sood’s blog post: Energy Consumption tool in Visual Studio 2013.

Performance and Diagnostics Hub

As you can see there are a great number of great tools in Visual Studio 2013 that build on the tooling provided in prior versions to help build beautiful applications that have performance and UI responsiveness to engage and amaze audiences.

As these can differ based on the application type that you are developing for a new Performance and Diagnostics Hub has been introduced in Visual Studio 2013 to provide a simple wizard based interface into your available tools available from the “Analyze” menu at all times is the “Performance and Diagnostics” option to get started.

Based on the Application type will change the options available to you. For example the image below is showing the correct options available for a C# based XAML application based on the Target selected by the “Change Target” button. Over time this hub will provide the single one stop shop location into all performance related tooling in Visual Studio.

For more detail around the Performance and Diagnostics hub please see Dan’s blog post (http://blogs.msdn.com/b/visualstudioalm/archive/2013/07/12/performance-and-diagnostics-hub-in-visual-studio-2013.aspx) or this great Channel9 video (http://channel9.msdn.com/Shows/Visual-Studio-Toolbox/Visual-Studio-2013-Performance-and-Diagnostic-Hub)

Resources

Visual Studio 2013

Internet Explorer