Diagnosing Mobile Website Issues on Windows Phone 8.1 with Visual Studio
April 4, 2014
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.
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>
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.
Next, I’ll start debugging (press F5), the emulator will start, and I will see the mobile version of my website running.
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.
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
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.
Since I am using the standard script debugger, I can see in the DataTip that el is null.
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:
- Breakpoints
- Stepping
- Watch and Locals windows
- JavaScript Console
- First Chance Exceptions
- Just My Code
- JSON Visualizer
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.
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”)
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.
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.
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.
…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.
- 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.
- 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)
From the “Choose Target” dropdown, select “Internet Explorer on Windows Phone”.
Enter the URL you wish to profile just as we did for debugging without a project.
I can now see the following performance tools available to me for Internet Explorer on the phone:
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.
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.
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.)
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
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 (http://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_MACHINESOFTWAREWow6432NodeMicrosoftVisualStudio12.0DiagnosticsHubComponentsIgnoreList (for 64-bit machines)
HKEY_LOCAL_MACHINESOFTWAREMicrosoftVisualStudio12.0DiagnosticsHubComponentsIgnoreList (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.0Common7ToolsShortcutsDeveloper 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
when debugging IE in windows phone 8.1 does visual studio support resource maps like you get when using F12 developer tools in ie11 on the desktop ?
sorry I meant source maps!
@ paul
Sorry for the late response, I was talking to another team about this
From what I found out – this isn't a scenario that was validated as supported, but it is very likely that it would work.
If you find that it doesn't, please, let us know (here or vsdbgfb @ microsoft.com) and we will look into it.
Hello.
I have a Nokia lumia730 (windows phone8.1). I wish to observe my office's cameras through out my phone but when I enter my IP in Internet Explorer's address bar, a message shows that "you have to install ActiveX. I did it in my lap top previously but now I can not do it in my phone.
Would you please help me in a simple way?
Kind regards
@kavang554
From the description that you provided for you issue, it looks like you are trying to use a website that wants to install an ActiveX control, and the phone doesn't support ActiveX controls. So this doesn't have anything to do with our tools. Please let me know if I'm misreading!
Dear Ms Ghiondea.
Thank you for replying soon.
In fact, I know nothing about the software's and website' subjects, but I wish to connect to my static IP which my cameras have been connected to that. As I said before, by means of the net book I can enter my IP address in the IE address bar, like: 188.158……, and then the IE shows my cameras.
Of course, I have installed IE ActiveX.exe on my net book which has windows7.
I hope I have explained my problem well.
Thank you again.
Kind regards
Kaveh
When I start debugging a URL using "Debug Windows Phone Internet Explorer" the following exception occurs:
"Das Starten von msvsmon.exe" ist mit Fehlercode – 1988945905 fehgeschlagen.
I am running VS Community 2015 on a Windows 10 machine. Here are details:
Microsoft Visual Studio Community 2015
Version 14.0.24720.00 Update 1
Microsoft .NET Framework
Version 4.6.01055
Installierte Version: Community
Visual Basic 2015 00322-20000-00000-AA307
Microsoft Visual Basic 2015
Visual C# 2015 00322-20000-00000-AA307
Microsoft Visual C# 2015
Visual C++ 2015 00322-20000-00000-AA307
Microsoft Visual C++ 2015
Windows Phone SDK 8.0 – DEU 00322-20000-00000-AA307
Windows Phone SDK 8.0 – DEU
Allgemeine Azure-Tools 1.5
Bietet allgemeine Dienste für die Verwendung durch Azure Mobile Services und Microsoft Azure-Tools.
Application Insights Tools für Visual Studio Package 1.0
Application Insights Tools für Visual Studio
ASP.NET und Webtools 2015.1 (Beta8) 14.1.11106.0
ASP.NET und Webtools 2015.1 (Beta8)
ASP.NET Web Frameworks and Tools 2012.2 4.1.41102.0
For additional information, visit go.microsoft.com/fwlink
ASP.NET Web Frameworks and Tools 2013 5.2.30624.0
For additional information, visit http://www.asp.net/
GitHub.VisualStudio 1.0
A Visual Studio Extension that brings the GitHub Flow into Visual Studio.
Microsoft Azure Mobile Services Tools 1.4
Microsoft Azure Mobile Services Tools
NuGet-Paket-Manager 3.3.0
NuGet-Paket-Manager in Visual Studio. Weitere Informationen zu NuGet finden Sie unter "http://docs.nuget.org/".
PreEmptive Analytics Visualizer 1.2
Microsoft Visual Studio-Erweiterung zur Visualisierung aggregierter Zusammenfassungen vom PreEmptive Analytics-Produkt.
SQL Server Data Tools 14.0.50616.0
Microsoft SQL Server Data Tools
TypeScript 1.7.4.0
TypeScript für Microsoft Visual Studio
Xamarin 3.11.837.0 (f10676f)
Visual Studio extension to enable development for Xamarin.iOS and Xamarin.Android.
Xamarin.Android 5.1.5.3 (f98871a95a479f6d71b3067b7e5834d41fcb2118)
Visual Studio plugin to enable development for Xamarin.Android.
Xamarin.iOS 8.10.4.0 (6db87c53c073f4af2f5247fb738a27ea08c094fd)
Visual Studio extension to enable development for Xamarin.iOS.
Xamarin.iOS Unified Migration 1.0
Automated migration for Xamarin iOS Classic projects to Unified
Xamarin.TestCloud.Integration 1.0
Early preview of Xamarin Test Cloud integration
The error doesn't help me. What can I try next?
@ Exception when debugging Without a Visual Studio Project:
To help better diagnose your issue we will need you to try out a few things.
First can you confirm that your phone is not at the lock screen when you are getting this error? The phone needs to be unlocked for debugging to work.