AndyDingsor 120000QS1R Visits (25136)
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.
Continue reading for a brief explanation of how WEINRE works, and a quick demonstration of how I started using it...
How it works
Figure 1. WEINRE Components
WEINRE consists of three pieces...
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.
The third and final piece is the “Debug Target”, which is the webk
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-> wein
Starting the Debug Server
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).
I selected one of my sandbox programs which uses the PhoneGap and Dojo Toolkit to play an mp3 music stream. (You can get a copy here: (wei
I rebuilt the app in my PhoneGap/Eclipse sandbox, and installed the app on my phone.
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:
Figure 3. WEINRE Background Green
The background color on my phone immediately changed to green.
Figure 4. Phone Background Green
Figure 5: WEINRE Background Black
And the phone immediately was restored back to black:
Figure 6: Phone 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
WEINRE worked amazingly well for me right out of the box.
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: wein
WEINRE home page: http
WEINRE downloads: http
PhoneGap framework: http
Dojo Toolkit: http