×
Namespaces

Variants
Actions

How to debug Windows Phone HTML5 Apps

From Nokia Developer Wiki
Jump to: navigation, search
{{{width}}}
26 May
2013

This article explains how to debug HTML5 applications for the Windows Phone platform.

WP Metro Icon Bug.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Tested with
SDK: Windows Phone SDK 7.1 or later
Devices(s): Lumia 920, Lumia 800, Phone emulator
Compatibility
Platform(s): Windows Phone 7.x and later
Windows Phone 8
Windows Phone 7.5
Article
Created: dan.ardelean (07 May 2013)
Last edited: hamishwillee (19 Jul 2013)

Overview

Debugging HTML applications is never an easy task and until today I did not know how to approach this for Windows Phone HTML5. The technique I will describe in this post can be applied also for Windows Phone 7.1 applications using Phonegap or Android/iOS applications. The "secret" tool for debugging the html content inside our applications is called WEINREwhich comes from WEb INspector REmote. Weinre is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.

Solution

In order to install Weinre you will need to download and install NodeJS

NodeJS

Once you have installed NodeJS restart your machine this way you will be able to run the NodeJS commands from the command prompt. After restart open a command prompt window and run this command:

npm install weinre -g  

This will install the Weinre package globally. This is what you should see in the Command Prompt window:

Weinre Install

When the installer has finished its work you are ready to run the Weinre server on your PC. Execute this command from the Command Prompt:

weinre --boundHost -all- --debug -true  

With these parameters Weinre should also open the firewall port. For more parameters have a look at this page. You can verify if the server started by opening a browser page and loading 127.0.0.1:8080 (8080 is the default port for Weinre). If you are seeing this page then the server is running:

Server running

Now click on the Debug Client User Interface link where you will be able to see if any client is connected and debug the connected clients.

Let's create the Windows Phone HTML5 application. Use the SDK template to create a new project, open the page index.html inside the folder Html and add this line to the head section:

<script src="http://[the server ip]:8080/target/target-script-min.js#anonymous"></script>  

replace [the server ip] with the IP of the PC running the Weinre server and run the application. If everything went as we expected in the Debug Client user Interface on the Server we should see one Target connected:

Client connected

Once the target Windows Phone page is connected you can inspect and change the DOM in real-time, execute javascripts:

Debug

In this particular case I've only changed the background of the page but you can do whatever you want. Here you can find further details on how to use the Server User Interface.

Using the Console panel you can execute arbitrary JavaScript expressions/statements. It also shows the output from various console methods, like console.log().

Commands

This is pretty much everything. Simple and hopefully useful. If you need to debug your HTML5 windows phone applications.

References

This page was last modified on 19 July 2013, at 07:36.
697 page views in the last 30 days.