Remote HTML5 debugging on Windows Phone with weinre

Remote HTML5 debugging on Windows Phone with weinre

  • Comments 4
  • Likes

This blog post was authored by Oren Freiberg, a Program Manager on the Windows Phone Browser team.

- Charles


Exciting news for HTML5 developers on Windows Phone 8: weinre (WEb INspector REmote) support has arrived! Weinre is a remote DOM inspector tool that web app developers can use to quickly solve the challenges of testing and debugging HTML5 content on mobile devices. Now, thanks to Microsoft Open Technologiesand the contributing community, you can use the latest version of weinre to ensure that your mobile website or web app works great with Internet Explorer 10 on Windows Phone 8.

Using weinre, a developer can inspect HTML content and modify the style and layout of a page in real time on a Windows Phone 8 device or emulator. You can also see errors as they occur in the weinre JavaScript console.

Demo

To see weinre in action, check out the demo video of an HTML5-based app being debugged on Windows Phone 8:

Getting started with weinre on Internet Explorer 10 and Windows Phone 8

Getting set up with weinre takes only a few minutes! Just follow the steps in Olivier Bloch's detailed article Now on IE and Firefox: Debug your mobile HTML5 page remotely with weinre (WEb INspector REmote).

How was this done?

Microsoft Open Technologies worked with the weinre community to remove weinre’s dependencies on WebKit. This opens the door for developers to debug their webpages on other standards-based browsers, including Internet Explorer 10. If you are curious about how you can adapt your WebKit-optimized site to support Internet Explorer 10 and make your site more compliant to the HTML5 standards, check out Charles Morris’s article on Adapting your WebKit-optimized site for Internet Explorer 10.

PhoneGap Challenge

If you already are using weinre on your other PhoneGap apps, join the PhoneGap challenge! It’s a great chance to launch your app on the Windows Phone 8 platform, use weinre, and you might win some prizes.

We would love to hear your feedback after you use weinre with Internet Explorer 10 on Windows Phone 8. Please comment below to let us know what you think.

4 Comments
You must be logged in to comment. Sign in or Join Now
  • Sorry, the xaml snippet didn't turn up in the previous posting. Let's see if this works:

    <!--

       <Grid x:Name="LayoutRoot" >

           <Grid.RowDefinitions>

               <RowDefinition Height="*"/>

           </Grid.RowDefinitions>

           <Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0" >

               <phone:WebBrowser

    x:Name="BrowserControl" Margin="0" IsScriptEnabled="True" IsGeolocationEnabled="True" />

           </Grid>

       </Grid>

    -->

  • You can only use custom fonts hosted in a server. Fonts added within a HTML5 apps is not supported for the current version.

    For href containing query parameter, I understand that this is used to force the browser to pick up the latest version instead of the cached version. This should work if you're pointing to a css/js hosted on a server. If the files are local to your app, then there should be no need for the query parameter. Can you share more information about your scenario?

    If you're referring to making the browser control full screen, you can use the following layout:

           <!--ContentPanel - place additional content here-->

  • Few questions

    How do I include fonts (locally) in HTML5 app so that it works?

    Do you know you can't have ? in href when you try to load local files (css/js).

    How do I make my app full screen. When I use position fixed and top, left, right, bottom 0, it still doesn't scale full scale. It leaves enough space for toolbar?

  • There is a useful walkthrough on this topic "How to debug Windows Phone HTML5 Apps" on Nokia Developer Wiki. See www.developer.nokia.com/.../How_to_debug_Windows_Phone_HTML5_Apps