Troubleshooting Mobile Versions of Windows Phone Websites on iOS or Linux

Have you ever tried asking your developers to prepare a website or web app without doing any debugging? If you have done so, they would have answered in the negative. After all, debugging any code is the quickest method for developers to fine tune the code and get the desired results.

While debugging is made easy for websites through the use of debugging tools for a desktop PC or laptop which runs on iOS or Linux, the same cannot be said about mobile devices, particularly Windows mobile phones. So, how can you debug a native web app on a Windows mobile device?

Well, the advent of remote debugging has made it possible to troubleshoot a Windows phone for some apps and do basic debugging tasks, such as inspecting elements and console logging. The best part is that you can do so by using the same developer tools through your desktop PC.

Let us look closely at the ways in which you can execute live debugging for your Windows phone device from a Mac or Linux computer.

Remote Debugging with a Windows Mobile Phone

It is impossible to connect your mobile browser to your computer’s browser and start native remote debugging for Windows phone apps. (Doing so is possible with Android device apps.) So, how do you approach the challenge of Windows phone remote debugging? Here are the solutions:

Using WEINRE

WEb INspector REmote (WEINRE) is a third-party tool which is specifically designed to work remotely. So, it serves as a remote debugging tool for Windows phone apps from your iOS or Linux development machines. It creates a debugging server which behaves as an intermediary between the development machine (the debugging client) and the Windows phone app (the debugging target).

But, how can your developers use WEINRE for remote debugging? Below are the steps to remote debug by using WEINRE:

First, they need to install Node.js from npm (> npm install -g weinre), because WEINRE runs on top of it.

Next, get the IP address of your system. For Linux, your developers can get the IP address by using the command “/sbin/ifconfig” and copying the address listed after “inet adr”. For Mac devices, you can get the IP address by using “ipconfig getifaddr en0”.

Then, kickstart the debugging server by setting the “-boundHost” option to your computer’s IP address and running “-weinre” as:
> weinre  --boundHost ab.c.d.ef
where ab.c.d.ef will be your development machine’s IP address.

The output of the above step is a URL (for example, http://ab.c.d.ef:wxyz where the letters will be replaced by numbers to indicate the IP address and some port details). From this address you can access your app’s development server. Your developers can copy this URL and view the same in any browser which is compatible with their Linux or Mac development machine.

Next, go to the target script section in the browser and copy the script tag that is required to communicate with the debug server. An example of the script tag would be
http://[ip address]:8080/target/target-script-min.js#[target name]

Here, you can give a meaningful name to the last part of the tag, such  as “windows”, for a better understanding.

Your developers can simply paste the script tag in the Windows phone app’s HTML section and then launch the app.

Next, on a developer’s computer, browse to a URL of the type below:
http://[ip address]:8080/client/#[target name]

You will then be able to view the details of your target (the app) where the script tag was inserted, under the heading “Targets”. Simply click on the link and it will take you to the menu that contains all the functionalities or features offered by WEINRE. You can click on a particular paragraph and it would be shown live on your Windows phone.

Pros of WEINRE

Even without doing much coding, your developers can start remote debugging the apps on your Windows mobile phone from their desktop PC or laptop. Some of the common debugging tasks that your developers can perform include CSS modifications, checking JavaScript errors, and running commands from JavaScript console.

WEINRE Cons

One limitation of WEINRE is that it cannot debug JavaScript or profile your app’s performance.

Using Visual Studio Tools or a Console Plugin

Your developers can use any Visual Studio debugging tool for Windows Phone 8.1 apps (i.e., apps which were built by using Apache Cordova). These apps are the same as those used for the Windows store app which was developed by using HTML as well as JavaScript.

However, it is impossible to attach a Visual Studio debugger for Windows Phone 8 apps. You can either use WEINRE as described above or add the console plugin to your Windows phone app, build it and later open the Windows Phone 8 project in Visual Studio by using the platforms\wp8 path. You can then view the console output and do the debugging.

We hope that the information regarding setting up the connection between your Windows phone device and the development computer for troubleshooting or remote debugging proves valuable to you. Feel free to share your queries or valuable feedback in the comments section below.

If you like my articles,