Mobile Web Debugging with WEINRE on a PC
PhoneGap which WEINRE is part of has been moved into the Apache Cordova project. Downloads are not currently available. As soon as they are, I will do an updated post. (4 May 2012)
Mobile Web Debugging with WEINRE on a PC
The Problem
One of the most problematic issues about developing mobile is websites is how to debug the site. Normally we use a desktop analog of the mobile browser on the desktop. For iOS we use Safari, for Android - Chrome, and Windows Phone 7 - Internet Explorer. While each of these analogs is sufficient for casual development, there are always issues which occur only on a device. Previously we resorted to primitive means to monitor the site while running on a device, usually alerts, console.logs or changing colors on a background, etc. WEINRE is a tool which permits remote debugging for most WebKit based browser. Good news for iOS, Android, Blackberry, and webOS development, sorry Windows Phone 7.
What is it?
Here is the official description of weinre:
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. http://phonegap.github.com/weinre/
weinre consist of three parts: two run on your server, the third runs on the client device. It works using code which hooks into the Web Inspector component of the WebKit browser on both the server and client devices.
Prerequisites
- Java JRE (Java Runtime Environment)
- Java JRE must be installed
- Java must be included in your path
- Your server machine must be visible on your network
- You must have your IP address
- From the command line, execute the command: ipconfig
- Look for the line: IPv4 Address, this will be your server’s IP address, write it down.
Installation Instructions
- Download load the latest version of weinre-jar-x.y.z.zip. At the time of writing the latest version is weinre-jar-1.6.1.zip.
- Unzip the package to its own folder. You can unzip any where you like so long as Java is in your path.
- Navigate to the unzipped folder.
- Execute the command: java -jar weinre.jar --boundHost -all-
- From another machine check to make sure that your server is accessible
- By default weinre uses port 8080, I would recommend not changing this until after you have verified that everything is working, unless you have a conflict with something else
- From a WebKit based browser, type the following URL:
- http://your server’s IP address:8080
- You should see the following appear:
- Click the link for the debug client user interface. You should see:
Remote Debugging Instructions
- weinre needs a script tag which includes its JavaScript in your site markup. If your server’s IP address is 1.2.3.4 then the script tag would like:<script src=”http://1.2.3.4:8080/target/target-script-min.js”></script>
- You must remove this script tag before production deployment. You may want to include it conditionally if you use server side scripting.
- Navigate to your website on your device.
- From the weinre server’s debug client interface, under Targets, click the link for your device. It will turn green to indicate that it is active. You can now debug your application.
Troubleshooting
- If your server has more than one IP address
- Turn all but one off and try
- There may be a conflict with another website
- Check to see if another site is running on port 8080
- If so, either change it or change weinre
- Make sure your server is visible remotely
Additional Notes
- The spinner will spin more than usual since the client will do a great deal of communication with the server.
- The JavaScript is fairly large (149KB).
- The client code will affect your site’s performance.
