I was previously familiar with debuggers like Web Inspector (and Firebug) which explore the code running in the co-located browser. But WEINRE does it remotely. And since it works with any webkit browser, like those in Android and iOS mobile devices, it is a perfect match for mobile debugging.
How it works
Figure 1. WEINRE Components
The first piece is a server called the “Debug Server”. It is the core component, and runs on a desktop machine or laptop, and communicates with the other two pieces.
The second piece is the “Debug Client”. This is a traditional webkit browser running on the same or different machine as the server. It connects to the server and presents the user with the familiar debugger view (like Web Inspector), where you can see what is going on and change the DOM.
Where to get it
I found lots of good information, documentation, and instructions at the WEINRE home page:
I downloaded WEINRE here. I went to Downloads-> weinre-jar-1.4.0.zip
java -jar weinre.jar --boundHost 192.168.2.4
Aside: The author of WEINRE publishes executables for the Debug Server in two formats: a java jar, and a MAC executable. I tested the java version only.
Starting the Debug Client
I started Chrome on my laptop, and browsed to the server:
Aside: One WEINRE debug server can support multiple clients and targets. As a single client, I used “anonymous”.
This brought up a screen which looks much like a web inspector screen (see Figure 2 below).
Aside: The Debug Client also showed my Chrome Browser (ie, itself) in its list of Debug Clients. This should be helpful information with multiple users.
Figure 2. Connected Target
Changing the DOM
As a simple experiment in modifying the DOM, I followed the examples in the WEINRE instructions and changed the background color on my phone. In the bottom window of the Debug Client, I typed:
document.body.style.background = "black"
To test console.log messages, I clicked the play and stop buttons. I immediately saw these messages appear in the bottom panel of the Debug Client.
Figure 7: Console.log messages
Conclusions and Recommendations
As an added benefit, WEINRE also works when testing my apps in an Android simulator. It works just like the phone.
I look forward to trying the other features of WEINRE, and encourage you to give it a try.
Kudos to fellow IBMer Patrick Mueller for developing WEINRE
Sample HTML: weinre.sample.2011-0719-1209.html
WEINRE home page: http://phonegap.github.com/weinre/Home.html
WEINRE downloads: https://github.com/phonegap/weinre
PhoneGap framework: http://www.phonegap.com
Dojo Toolkit: http://www.dojotoolkit.org