Diagnosing Mobile Website Issues on Windows Phone 8.1 with Visual Studio

Diagnosing Mobile Website Issues on Windows Phone 8.1 with Visual Studio

Rate This
  • Comments 11

If you have spent time trying to make a compelling mobile version of your website you have likely hit issues with it not looking or working correctly on mobile browsers.  To help with this on Windows Phone, we’re very excited to announce that in Visual Studio 2013 Update 2 we have enabled the use of Visual Studio’s debugging and performance tools for Internet Explorer on Windows Phone 8.1.

In this post, I’ll walk you through using these new capabilities. 

  • First we’ll create the sample ASP.NET project we'll use in this post.
  • Then we’ll show how ASP.NET can launch your project directly in the Windows Phone 8.1 emulator or on a Windows Phone device.
  • Next we’ll walk through debugging websites where you do not have a Visual Studio project.
  • Finally we’ll look at how to run the performance tools available in the Performance and Diagnostics hub.

Before I begin it is important to note that this walkthrough requires you to have installed Visual Studio 2013 Update 2 RC.

Creating the Sample

To illustrate how to use these tools I’ll start by creating an ASP.NET MVC application in Visual Studio 2013 Update 2. 

image
If you want to follow along, create the ASP.NET project yourself and copy and paste the code below into the the specified project files

The great thing about the ASP.NET template is it automatically generates a mobile layout of the site for me.  For the purposes of this post I’m going to make a page that animates a div when the user clicks a button to start the animation.  First I add a script file to the project’s “Scripts” folder called “SampleScriptFile.js” with the following content:

var yCoord = 0; 
function buttonClick() { 
    var el = document.getElementById("msg"); 
    yCoord += 2; 
    if (yCoord < window.innerHeight) { 
        el.style.top = yCoord + "px"; 
        requestAnimationFrame(buttonClick); 
    } 
    else { 
        el.innerText = "animation completed"; 
        el.style.top = "50px"; 
    } 
}

I’ll then replace the content of the “Views\Home\Index.cshtml” file with

<style>
    div.message{
        background-color:blue;
        color:white;
        position:absolute;
    }
</style>

<script src="~/Scripts/SampleScriptFile.js"></script>

<div id="message" class="message">Message</div>
<p><a onclick="buttonClick()" class="btn btn-primary btn-lg">Start animation!</a></p>

image

Debugging ASP.NET applications

To make sure this looks like I want on the phone’s browser, I’ll change the launch location to be the Windows Phone Emulator.  To do this, click the down arrow on the Start Debugging control, choose the new “Windows Phone” option, and select the first emulator “Emulator 8.1 WVGA 4 inch 512MB” option.

image

Next, I’ll start debugging (press F5), the emulator will start, and I will see the mobile version of my website running.

image

At this point I will note a few important things about the URL you may notice above, which by default uses “localhost”

  • Here I am using IIS Express with the ASP.NET application. IIS Express will only accept connections from the same machine, so when debugging on the emulator “localhost” works as you would expect. IIS Express however cannot be used to debug on a physical device since it is a different physical machine
  • To use the tools mentioned in this post on a physical device, you will either need to configure the project system to use IIS instead of IIS Express and set the start URL to be the computer’s name; or host your website on a separate server and use that URL (see the following section).

Debugging a layout error

After I start debugging the first thing I see is that the “Message” div is appearing on top of the “Start animation!” button.  On previous versions of Windows Phone I would have been left to trial and error to figure out what to set the top offset of the “message” div to.  However now that I have the debugging tools I can leverage the DOM Explorer (Debug –> Windows-> DOM Explorer).  In this case I used the “Select Element” feature in the top left, and clicked on the button in my application.  Then looking at the “Layout” view, I determined the message’s initial top offset should be ~97px--to get this number I summed the vertical height and offset values of the button and all of the elements above it (50+1+10+23.96+10+1=95.96) and then added 1 and rounded 96.96 to 97.

image

Making this change to the style of the message div

div.message{ background-color:blue; color:white; position:absolute; top:97px; } 

results in it appearing where I want it

image

Debugging a script error

Next I want to make sure that this functions as I expect.  I click the “Start animation!” button and instantly the debugger breaks to tell me that an error occurred in my JavaScript.

image

Since I am using the standard script debugger, I can see in the DataTip that el is null.

image

After a bit of inspection, I realize that I mistyped the Id of the element (it should be “message” not “msg”).  I’ll correct that quickly by changing the line to

var el = document.getElementById("message");

Then a quick test reveals that the message div now animates to the bottom of the screen when the button is clicked.

Even though I only showed the DOM Explorer, breaking on an unhandled exception, and DataTips in this brief demo, I want to point out the that full JavaScript debugging experience is available including but not limited to the following features:

And, because it is ASP.NET, I am also debugging the server-side code as well so I can set breakpoints in the C# code (e.g. in the Index() method of “Controllers\HomeController”) which will be hit when called from the phone, the same as any other ASP.NET debugging session.

image

 

Debugging Without a Visual Studio Project

In the previous part of the post I covered how to debug ASP.NET applications on Windows Phone 8.1 with F5.  However we recognize that not everyone is going to be doing ASP.NET development. So to debug web sites running anywhere and created with any backend technology we’ve added a menu option called “Debug Windows Phone Internet Explorer” (available under “Debug –> Other Debug Targets”)

image

That will open a dialog that allows you to select the following options:

  • Specify whether you want to debug in one of the emulators or a connected device
  • Specify the URL you would like to debug.

image

In this case I have published the ASP.NET application I created above as a Windows Azure website, I enter the URL for the Azure website version, then click start debugging.

image

Since I don’t have a project, in order to set breakpoints in my source code, I can open any loaded script file from the “Script Documents” node in Solution Explorer.

image

…and then the experience is similar as if I had a project open!

Debugging Performance

When running my application under the debugger I noticed that the animation wasn’t performing as smoothly as I would prefer.  Before I jump to any conclusions, there are two important things to note about evaluating performance.

  1. Never evaluate performance when launching Internet Explorer using the debugging commands (“Start Debugging” and “Start Without Debugging”).  When the debugging commands launch Internet Explorer, it is launched in a “debuggable state”, which causes JavaScript code to run slower than during normal browsing.
  2. You will want to test performance on a physical device before concluding it is acceptable.  For some classes of performance issues (e.g. memory) the emulator will be sufficient.  However for other types of issues (e.g. CPU consumption) the site will generally perform better on the emulator, and finally for drawing intensive operations the emulator will potentially perform worse because all rendering is done on the CPU where a physical device will have the ability render on the GPU.

Since I’m not happy with the performance of the animation I’m going to use the performance tools available to me in the Performance and Diagnostics hub.  To do this, open the Performance and Diagnostics hub (Debug –> Performance and Diagnostics)

image

From the “Choose Target” dropdown, select “Internet Explorer on Windows Phone”.

image

 Enter the URL you wish to profile just as we did for debugging without a project.

image

I can now see the following performance tools available to me for Internet Explorer on the phone:

image

For the purposes of this example, I’ll select CPU Usage and HTML UI Responsiveness tools together, and then press “Start”.  Internet Explorer on the phone will be launched and navigate to the URL I specified.  I now see the CPU utilization graph updating live, and a message telling me that data is being collected.

image

After clicking the button I can see that the jittery animation reproduces as I expect, so next I’ll click the “Stop collection” link on the collection page.

I’m now presented with the report showing me the CPU consumption and frame rate of the application where I can see that it does sometimes randomly drop from 60 fps to ~30 fps on the “Visual Throughput (FPS)” graph.

image

 Since all of the available tools are well covered in the dedicated blog posts linked above I will not spend time digging into the reports here.  However, after looking at the report above I see that every style update in script code causes a Paint and a Layout.  After a bit of research I tweak the animation to use a CSS transform in conjunction with a CSS transition to animate the message box, which will do the calculations directly on the GPU.  This gives me the following “SampleScriptFile.js”

function buttonClick() {
    var el = document.getElementById("message");
    el.style.transform = "translate(0px," + window.innerHeight + "px)";
    el.style.transitionDuration = "2s";
    el.style.transitionProperty = "transform";
    el.style.transitionTimingFunction = "linear";
    el.addEventListener("MSTransitionEnd", transitionEnd, false);
} 

//This function sets the div back to its original position when the animation ends
function transitionEnd() {
    var el = document.getElementById("message");
    el.innerText = "animation completed";
    el.setAttribute("style", ""); //undo all the transition style properties
} 

To validate this behaves as I expect it to, I run the profiling tools again, and can see that there are significantly fewer events occurring between starting the animation and it ending. (The single set of events corresponds to when I updated the div’s style to add the transition and transform properties.)

image

Note: The emulator does not have direct access to the development machine’s GPU, so it simulates the behavior on the CPU. If you are trying this on the emulator rather than the device you will not see the events appear in the HTML UI Responsiveness timeline, but you will see the CPU consumption of the site remain high in the CPU utilization graph. Also due to this, the physical device will likely perform better than the emulator in this case

In Closing

In this post we quickly walked through how to debug and profile web applications running in Internet Explorer on Windows Phone 8.1 devices.  While we looked at simple examples, I hope that you can see how to apply these new capabilities to your web applications.

If you have any questions or comments please let us know by either commenting below or posting in our MSDN forum

Leave a Comment
  • Please add 3 and 6 and type the answer here:
  • Post
  • Hi Andrew,

    I'm trying to debug performance for a site (not my own, I don't have the source), but when I go to the Performance and Diagnostics hub and click the Targets button I don't see the option 'Internet Explorer on Windows Phone'. Can this option only be used if I have a project opened or are there other requirements? I can debug the site as you have shown in the first part of this post.

    Regards

  • @Peter, have you installed Visual Studio 2013 Update 2 (www.microsoft.com/.../details.aspx)?  This capability was added in Update 2.

  • @Andrew, sorry, I forgot to mention it, yes I have Visual Studio 2013 Update 2 RTM installed. This is the version which I have installed:

    Microsoft Visual Studio Ultimate 2013

    Version 12.0.30501.00 Update 2

    Microsoft .NET Framework

    Version 4.5.51641

  • @Peter, we were able to get a repro of this internally and are currently working on debugging the root cause.  It somehow seems to be related to an issue installing the update, so you might try repairing your installation to see if that corrects it (or reinstall update 2).

  • Can I debug HTML/JavaScript content hosted in my C# Windows Phone app in WebBrowser control?

  • @lostmsu, yes you can on Windows Phone 8.1  To do this, on the Debug tab of the Project Properties select the "Script" instead of "Managed Only" as the debugger type for the application process.

  • Hi Andrew,

    I just finished repairing both my Visual Studio installation and the Update 2 installation, but both attempts did nothing for my issue. I still can't the 'Internet Explorer on Windows Phone' option in Visual Studio.

    Any indication on a fix for this?

    Regards

  • @Peter, thanks for reporting the issue. Our internal repro shows the presence of a registry value to cause ‘Internet Explorer on Windows Phone’ option to not show up. This value was added by installation of Visual Studio 2013 Update 2 CTP1 and it sometimes does not get cleaned up on uninstall. You can follow the below steps to fix this.

    1. Open Registry Editor regedit.exe and go to following registry key

    HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\VisualStudio\12.0\DiagnosticsHub\ComponentsIgnoreList (for 64-bit machines)

    HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\12.0\DiagnosticsHub\ComponentsIgnoreList (for 32-bit machines)

    2. You will see the below value set to 1 which causes the option to not load. Please delete this value.

    34C0B0B0-0658-4DD3-A677-81108D433D8D

    3. Launch Developer Command Prompt as administrator

    C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\Tools\Shortcuts\Developer Command Prompt for VS2013.lnk

    4. Reset Visual Studio Settings

    Devenv /setup or  vswinexpress /setup (if you have express version)

    If you launch visual studio, you should be able to see the menu.

  • @Andrew, @Haseeb: I managed to get the debugging working with the instructions Haseeb gave, it works great and is a really powerfull way to get information! I'm not sure how the reg key was created, I have never had VS2013.2 CTP 1 installed :? But anyway, thanks for all the help!

  • Is there ability to run WP 8.0 emulators?

  • @Oleg, unfortunately no.  The ability for Visual Studio to run tools against IE on the phone required changes to the operating system, so is only supported on 8.1

Page 1 of 1 (11 items)