Debug Mobile Apps with Weinre

- Kunal Jaggi, Author of SCWCD Exam Guide with Java EE 5 and Programming WebSphere MQ with Java, McGraw-Hill Education

Debugging web applications on a standard desktop browser is easy, thanks to developer aid tools like FireBug (for Firefox) and Web inspector (for WebKit-based browsers). However, when we need to deliver the same content on mobile browsers, debugging can be very tedious, time consuming and annoying because of small screen size and lack of debugging tools on mobile browsers. Weinre, an Apache project helps to debug web pages on mobile devices.

In this article, we will show how easy it is to remotely debug a mobile HTML 5 app with a remote inspector running on desktop. We will also make changes in the inspector and see them taking effect on the mobile device.

Register a unique alias

Weinre can be downloaded as a JAR file and run as HTTP server. However, for the sake of simplicity, we will use a publically available Weinre service provided by PhoneGap- a hybrid mobile application development framework.

Visit debug.phonegap.com and enter a guid- a globally unique identifier. This should be unique for your app. Figure 1 shows the Weinre home page we need to configure.

Add Weinre target script and start debugging

Copy the script tag shown in step 2 of Figure 1 into the home page of your app that you want to debug. For demonstration, we will add the target script to the mobile website we created for our article titled “Handling cross-domain requests with HTML 5”, published in June 2012.

Before we hit the ground running, open the link shown on step 3 on Weinre configuration page (refer Figure 1) in a WebKit based browser, we will use WebKit inspector in Chrome. This will open the client debugger. Now, fire a new browser on your mobile phone and visit http://pcq-mobile.appspot.com. You will notice that Weinre will detect your device, as depicted in Figure 2 below.

With Weinre, debugging HTML-based mobile apps is tad simple. You can make changes in the remote inspector and they will be instantly reflected on the mobile device. For example, we will change header font color and see that taking effect in Safari on iPhone. This is shown in Figure 3 below.

Conclusion

The remote web inspector provided by Weinre is a nifty tool that can be very useful in debugging mobile apps. It is a handy tool which can save lot of time. Weinre is now officially an Apache Cordova subproject. Care should be taken while using the public Weinre service provided by PhoneGap, in most cases it is very safe to use unless you publish the inspector URL to a wider audience.