{"id":1513,"date":"2014-04-04T07:30:00","date_gmt":"2014-04-04T07:30:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudioalm\/2014\/04\/04\/diagnosing-mobile-website-issues-on-windows-phone-8-1-with-visual-studio\/"},"modified":"2022-07-18T00:58:52","modified_gmt":"2022-07-18T08:58:52","slug":"diagnosing-mobile-website-issues-on-windows-phone-8-1-with-visual-studio","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/devops\/diagnosing-mobile-website-issues-on-windows-phone-8-1-with-visual-studio\/","title":{"rendered":"Diagnosing Mobile Website Issues on Windows Phone 8.1 with Visual Studio"},"content":{"rendered":"<p>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.\u00a0 To help with this on Windows Phone, we\u2019re very excited to announce that in <a href=\"http:\/\/go.microsoft.com\/fwlink\/?LinkId=390521\">Visual Studio 2013 Update 2<\/a> we have enabled the use of Visual Studio\u2019s debugging and performance tools for\u00a0Internet Explorer on Windows Phone 8.1.<\/p>\n<p>In this post, I\u2019ll walk you through using these new capabilities.\u00a0<\/p>\n<ul>\n<li>First we\u2019ll create\u00a0the sample ASP.NET project we&#8217;ll use in this post.<\/li>\n<li>Then we\u2019ll show how ASP.NET can launch your project directly in the Windows Phone 8.1 emulator or on a Windows Phone device.<\/li>\n<li>Next we\u2019ll walk through debugging websites where you do not have a Visual Studio project.<\/li>\n<li>Finally we\u2019ll look at how to run the performance tools available in the <a href=\"http:\/\/blogs.msdn.com\/b\/visualstudioalm\/archive\/2013\/07\/12\/performance-and-diagnostics-hub-in-visual-studio-2013.aspx\">Performance and Diagnostics hub<\/a>.<\/li>\n<\/ul>\n<p>Before I begin it is important to note that <span style=\"text-decoration: underline\">this walkthrough requires<\/span> you to have installed <a href=\"http:\/\/go.microsoft.com\/fwlink\/?LinkId=390521\">Visual Studio 2013 Update 2 RC<\/a>.<\/p>\n<h2>Creating the Sample<\/h2>\n<p>To illustrate how to use these tools I\u2019ll start by creating an ASP.NET MVC application in Visual Studio 2013 Update 2.\u00a0<\/p>\n<p><img decoding=\"async\" style=\"border-width: 0px\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/04\/4705.image_thumb_22BD59F8.png\" alt=\"image\" width=\"585\" height=\"333\" border=\"0\" \/><br \/>\n<em>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<\/em><\/p>\n<p>The great thing about the ASP.NET template is it automatically generates a mobile layout of the site for me.\u00a0 For the purposes of this post I\u2019m going to make a page that animates a div when the user clicks a button to start the animation.\u00a0 First I add a script file to the project\u2019s \u201cScripts\u201d folder called \u201cSampleScriptFile.js\u201d with the following content:<\/p>\n<pre>var yCoord = 0; \nfunction buttonClick() { \n    var el = document.getElementById(\"msg\"); \n    yCoord += 2; \n    if (yCoord &lt; window.innerHeight) { \n        el.style.top = yCoord + \"px\"; \n        requestAnimationFrame(buttonClick); \n    } \n    else { \n        el.innerText = \"animation completed\"; \n        el.style.top = \"50px\"; \n    } \n}<\/pre>\n<p>I\u2019ll then replace the content of the \u201cViewsHomeIndex.cshtml\u201d file with<\/p>\n<p><code>&lt;style&gt; &lt;br \/&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; div.message{ &lt;br \/&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; background-color:blue; &lt;br \/&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; color:white; &lt;br \/&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; position:absolute; &lt;br \/&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; } &lt;br \/&gt;&lt;\/style&gt; &lt;br \/&gt; &lt;br \/&gt;&lt;script src=\"~\/Scripts\/SampleScriptFile.js\"&gt;&lt;\/script&gt; &lt;br \/&gt; &lt;br \/&gt;&lt;div id=\"message\" class=\"message\"&gt;Message&lt;\/div&gt; &lt;br \/&gt;&lt;p&gt;&lt;a onclick=\"buttonClick()\" class=\"btn btn-primary btn-lg\"&gt;Start animation!&lt;\/a&gt;&lt;\/p&gt; &lt;br \/&gt;<\/code><\/p>\n<p><img decoding=\"async\" style=\"border-width: 0px\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/04\/3666.image_thumb_409E6EAA.png\" alt=\"image\" width=\"309\" height=\"630\" border=\"0\" \/><\/p>\n<h2>Debugging ASP.NET applications<\/h2>\n<p>To make sure this looks like I want on the phone\u2019s browser, I\u2019ll change the launch location to be the Windows Phone Emulator.\u00a0 To do this, click the down arrow on the Start Debugging control, choose the new \u201cWindows Phone\u201d option, and select the first emulator \u201cEmulator 8.1 WVGA 4 inch 512MB\u201d option.<\/p>\n<p><img decoding=\"async\" style=\"border-width: 0px\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/04\/5810.image_thumb_3BBBBAEE.png\" alt=\"image\" width=\"656\" height=\"270\" border=\"0\" \/><\/p>\n<p>Next, I\u2019ll start debugging (press F5), the emulator will start, and I will see the mobile version of my website running.<\/p>\n<p><img decoding=\"async\" style=\"border-width: 0px\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/04\/3568.image_thumb_693CDAB1.png\" alt=\"image\" width=\"306\" height=\"558\" border=\"0\" \/><\/p>\n<p>At this point I will note a few important things about the URL you may notice above, which by default uses \u201clocalhost\u201d<\/p>\n<ul>\n<li>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 \u201clocalhost\u201d works as you would expect. IIS Express however cannot be used to debug on a physical device since it is a different physical machine<\/li>\n<li>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\u2019s name; or host your website on a separate server and use that URL (see the following section).<\/li>\n<\/ul>\n<h2>Debugging a layout error<\/h2>\n<p>After I start debugging the first thing I see is that the \u201cMessage\u201d div is appearing on top of the \u201cStart animation!\u201d button.\u00a0 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 \u201cmessage\u201d div to.\u00a0 However now that I have the debugging tools I can leverage the DOM Explorer (Debug \u2013> Windows-> DOM Explorer).\u00a0 In this case I used the \u201cSelect Element\u201d feature in the top left, and clicked on the button in my application.\u00a0 Then looking at the \u201cLayout\u201d view, I determined the message\u2019s initial top offset should be ~97px&#8211;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.<\/p>\n<p><img decoding=\"async\" style=\"border-width: 0px\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/04\/2047.image_thumb_722C6CF0.png\" alt=\"image\" width=\"618\" height=\"318\" border=\"0\" \/><\/p>\n<p>Making this change to the style of the message div<\/p>\n<pre><code>div.message{ background-color:blue; color:white; position:absolute; top:97px; } \n<\/code><\/pre>\n<p>results in it appearing where I want it<\/p>\n<p><img decoding=\"async\" style=\"border-width: 0px\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/04\/8322.image_thumb_01CF08B3.png\" alt=\"image\" width=\"445\" height=\"256\" border=\"0\" \/><\/p>\n<h2>Debugging a script error<\/h2>\n<p>Next I want to make sure that this functions as I expect.\u00a0 I click the \u201cStart animation!\u201d button and instantly the debugger breaks to tell me that an error occurred in my JavaScript.<\/p>\n<p><img decoding=\"async\" style=\"border-width: 0px\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/04\/6114.image_thumb_0F351BB9.png\" alt=\"image\" width=\"620\" height=\"439\" border=\"0\" \/><\/p>\n<p>Since I am using the standard script debugger, I can see in the DataTip that <em>el<\/em> is null.<\/p>\n<p><img decoding=\"async\" style=\"border-width: 0px\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/04\/3073.image_thumb_51A7BDEF.png\" alt=\"image\" width=\"366\" height=\"131\" border=\"0\" \/><\/p>\n<p>After a bit of inspection, I realize that I mistyped the Id of the element (it should be \u201cmessage\u201d not \u201cmsg\u201d).\u00a0 I\u2019ll correct that quickly by changing the line to<\/p>\n<pre><code>var el = document.getElementById(\"message\");\n<\/code><\/pre>\n<p>Then a quick test reveals that the message div now animates to the bottom of the screen when the button is clicked.<\/p>\n<p>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:<\/p>\n<ul>\n<li><a href=\"http:\/\/blogs.msdn.com\/b\/visualstudioalm\/archive\/2013\/10\/07\/breakpoints-in-visual-studio-2013.aspx\">Breakpoints<\/a><\/li>\n<li><a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/y740d9d3.aspx\">Stepping<\/a><\/li>\n<li><a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/bhawk8xd.aspx\">Watch and Locals windows<\/a><\/li>\n<li><a href=\"http:\/\/msdn.microsoft.com\/query\/dev12.query?appId=Dev12IDEF1&amp;l=EN-US&amp;k=k(VS.WebClient.JavaScriptConsole)&amp;rd=true#InteractiveConsole\">JavaScript Console<\/a><\/li>\n<li><a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/d14azbfh.aspx\">First Chance Exceptions<\/a><\/li>\n<li><a href=\"http:\/\/blogs.msdn.com\/b\/visualstudioalm\/archive\/2013\/11\/25\/just-my-code-for-asp-net-in-visual-studio-2013.aspx\">Just My Code<\/a><\/li>\n<li><a href=\"http:\/\/blogs.msdn.com\/b\/visualstudioalm\/archive\/2014\/02\/06\/json-debugger-visualizer-in-visual-studio-2013.aspx\">JSON Visualizer<\/a><\/li>\n<\/ul>\n<p>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\u00a0(e.g. in the <em>Index()<\/em> method of \u201cControllersHomeController\u201d) which will be hit when called from the phone, the same as any other ASP.NET debugging session.<\/p>\n<p><img decoding=\"async\" style=\"border-width: 0px\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/04\/3566.image_thumb_585AC772.png\" alt=\"image\" width=\"363\" height=\"111\" border=\"0\" \/><\/p>\n<p>\u00a0<\/p>\n<h2>Debugging Without a Visual Studio Project<\/h2>\n<p>In the previous part of the post I covered how to debug ASP.NET applications on Windows Phone 8.1 with F5.\u00a0 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\u2019ve added a menu option called \u201cDebug Windows Phone Internet Explorer\u201d (available under \u201cDebug \u2013> Other Debug Targets\u201d)<\/p>\n<p><img decoding=\"async\" style=\"border-width: 0px\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/04\/2500.image_thumb_1ED7B77B.png\" alt=\"image\" width=\"648\" height=\"184\" border=\"0\" \/><\/p>\n<p>That will open a dialog that allows you to select the following options:<\/p>\n<ul>\n<li>Specify whether you want to debug in one of the emulators or a connected device<\/li>\n<li>Specify the URL you would like to debug.<\/li>\n<\/ul>\n<p><img decoding=\"async\" style=\"border-width: 0px\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/04\/6153.image_thumb_7A4629F6.png\" alt=\"image\" width=\"406\" height=\"209\" border=\"0\" \/><\/p>\n<p>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.<\/p>\n<p><img decoding=\"async\" style=\"border-width: 0px\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/04\/3426.image_thumb_157E82F8.png\" alt=\"image\" width=\"410\" height=\"180\" border=\"0\" \/><\/p>\n<p>Since I don\u2019t have a project, in order to set breakpoints in my source code, I can open any loaded script file from the \u201cScript Documents\u201d node in Solution Explorer.<\/p>\n<p><img decoding=\"async\" style=\"border-width: 0px\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/04\/1307.image_thumb_102F9C47.png\" alt=\"image\" width=\"327\" height=\"305\" border=\"0\" \/><\/p>\n<p>\u2026and then the experience is similar as if I had a project open!<\/p>\n<h2>Debugging Performance<\/h2>\n<p>When running my application under the debugger I noticed that the animation wasn\u2019t performing as smoothly as I would prefer.\u00a0 Before I jump to any conclusions, there are two important things to note about evaluating performance.<\/p>\n<ol>\n<li>Never evaluate performance when launching Internet Explorer using the debugging commands (\u201cStart Debugging\u201d and \u201cStart Without Debugging\u201d).\u00a0 When the debugging commands launch Internet Explorer, it is launched in a \u201cdebuggable state\u201d, which causes JavaScript code to run slower than during normal browsing.<\/li>\n<li>You will want to test performance on a physical device before concluding it is acceptable.\u00a0 For some classes of performance issues (e.g. memory) the emulator will be sufficient. \u00a0However 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.<\/li>\n<\/ol>\n<p>Since I\u2019m not happy with the performance of the animation I\u2019m going to use the performance tools available to me in the <a href=\"http:\/\/blogs.msdn.com\/b\/visualstudioalm\/archive\/2013\/07\/12\/performance-and-diagnostics-hub-in-visual-studio-2013.aspx\">Performance and Diagnostics hub<\/a>.\u00a0 To do this, open the Performance and Diagnostics hub (Debug \u2013> Performance and Diagnostics)<\/p>\n<p><img decoding=\"async\" style=\"border-width: 0px\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/04\/0333.image_thumb_72BD4B3A.png\" alt=\"image\" width=\"415\" height=\"219\" border=\"0\" \/><\/p>\n<p>From the \u201cChoose Target\u201d dropdown, select \u201cInternet Explorer on Windows Phone\u201d.<\/p>\n<p><img decoding=\"async\" style=\"border-width: 0px\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/04\/2620.image_thumb_2B67F548.png\" alt=\"image\" width=\"477\" height=\"305\" border=\"0\" \/><\/p>\n<p>\u00a0Enter the URL you wish to profile just as we did for debugging without a project.<\/p>\n<p><img decoding=\"async\" style=\"border-width: 0px\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/04\/8182.image_thumb_66BB5B06.png\" alt=\"image\" width=\"409\" height=\"179\" border=\"0\" \/><\/p>\n<p>I can now see the following performance tools available to me for Internet Explorer on the phone:<\/p>\n<ul>\n<li><a href=\"http:\/\/blogs.msdn.com\/b\/visualstudioalm\/archive\/2014\/02\/28\/new-cpu-usage-tool-in-the-performance-and-diagnostics-hub-in-visual-studio-2013.aspx\">CPU Usage<\/a><\/li>\n<li><a href=\"http:\/\/blogs.msdn.com\/b\/visualstudioalm\/archive\/2013\/07\/17\/html-ui-responsiveness-tool-in-visual-studio-2013.aspx\">HTML UI Responsiveness<\/a><\/li>\n<li><a href=\"http:\/\/blogs.msdn.com\/b\/visualstudioalm\/archive\/2013\/04\/24\/how-to-profile-a-javascript-windows-store-app-for-performance-problems.aspx\">JavaScript Function Timing<\/a><\/li>\n<li><a href=\"http:\/\/blogs.msdn.com\/b\/visualstudio\/archive\/2013\/01\/28\/javascript-memory-analysis-for-windows-store-apps-in-visual-studio-2012.aspx\">JavaScript Memory<\/a><\/li>\n<\/ul>\n<p><img decoding=\"async\" style=\"border-width: 0px\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/04\/4478.image_thumb_143C7ACA.png\" alt=\"image\" width=\"575\" height=\"522\" border=\"0\" \/><\/p>\n<p>For the purposes of this example, I\u2019ll <a href=\"http:\/\/blogs.msdn.com\/b\/visualstudioalm\/archive\/2014\/02\/11\/combining-tools-in-the-performance-and-diagnostics-hub-in-visual-studio-2013.aspx\">select CPU Usage and HTML UI Responsiveness tools together<\/a>, and then press \u201cStart\u201d.\u00a0 Internet Explorer on the phone will be launched and navigate to the URL I specified.\u00a0 I now see the CPU utilization graph updating live, and a message telling me that data is being collected.<\/p>\n<p><img decoding=\"async\" style=\"border-width: 0px\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/04\/3644.image_thumb_7A013307.png\" alt=\"image\" width=\"622\" height=\"433\" border=\"0\" \/><\/p>\n<p>After clicking the button I can see that the jittery animation reproduces as I expect, so next I\u2019ll click the \u201cStop collection\u201d link on the collection page.<\/p>\n<p>I\u2019m 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 \u201cVisual Throughput (FPS)\u201d graph.<\/p>\n<p><img decoding=\"async\" style=\"border-width: 0px\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/04\/6646.image_thumb_177614C5.png\" alt=\"image\" width=\"641\" height=\"590\" border=\"0\" \/><\/p>\n<p>\u00a0Since 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.\u00a0 However, after looking at the report above I see that every style update in script code causes a Paint and a Layout.\u00a0 After a bit of research I tweak the animation to use a <a href=\"http:\/\/www.w3schools.com\/cssref\/css3_pr_transform.asp\">CSS transform<\/a> in conjunction with a <a href=\"http:\/\/www.w3schools.com\/cssref\/css3_pr_transition.asp\">CSS transition<\/a> to animate the message box, which will do the calculations directly on the GPU.\u00a0 This gives me the following \u201cSampleScriptFile.js\u201d<\/p>\n<pre style=\"font-family: Consolas\">function buttonClick() {\n    var el = document.getElementById(\"message\");\n    el.style.transform = \"translate(0px,\" + window.innerHeight + \"px)\";\n    el.style.transitionDuration = \"2s\";\n    el.style.transitionProperty = \"transform\";\n    el.style.transitionTimingFunction = \"linear\";\n    el.addEventListener(\"MSTransitionEnd\", transitionEnd, false);\n} \n\n\/\/This function sets the div back to its original position when the animation ends\nfunction transitionEnd() {\n    var el = document.getElementById(\"message\");\n    el.innerText = \"animation completed\";\n    el.setAttribute(\"style\", \"\"); \/\/undo all the transition style properties\n} \n<\/pre>\n<p>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\u2019s style to add the transition and transform properties.)<\/p>\n<p><img decoding=\"async\" style=\"border-width: 0px\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2014\/04\/3603.image_thumb_12936109.png\" alt=\"image\" width=\"628\" height=\"388\" border=\"0\" \/><\/p>\n<p><em>Note: The emulator does not have direct access to the development machine\u2019s 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<\/em><\/p>\n<h2>In Closing<\/h2>\n<p>In this post we quickly walked through how to debug and profile web applications running in Internet Explorer on Windows Phone 8.1 devices.\u00a0 While we looked at simple examples, I hope that you can see how to apply these new capabilities to your web applications.<\/p>\n<p>If you have any questions or comments please let us know by either commenting below or posting in our <a href=\"http:\/\/social.msdn.microsoft.com\/Forums\/en-US\/vsdebug\/threads\">MSDN forum<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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.\u00a0 To help with this on Windows Phone, we\u2019re very excited to announce that in Visual Studio 2013 Update 2 we have enabled the use of [&hellip;]<\/p>\n","protected":false},"author":68,"featured_media":45953,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1,225],"tags":[],"class_list":["post-1513","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-devops","category-git"],"acf":[],"blog_post_summary":"<p>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.\u00a0 To help with this on Windows Phone, we\u2019re very excited to announce that in Visual Studio 2013 Update 2 we have enabled the use of [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/posts\/1513","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/users\/68"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/comments?post=1513"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/posts\/1513\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/media\/45953"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/media?parent=1513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/categories?post=1513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/tags?post=1513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}