Currently, Weinre, developed by Patrick Mueller, only works in Webkit-based browsers like Google and Safari, as used in iPhone and Android devices. Here are the steps to download and install the software tool, and get it running on an iPod touch device running an app which uses Cordova PhoneGap. These steps are extremely thorough, designed for newbies to coding. (You’re welcome.)
(Sept. 21, 2012 update: If you use a Mac, you may want to try the iWebInspector, which is more feature-rich and designed to replace Weinre on the Mac.)
1. Download an “unofficial” binary package of weinre at http://people.apache.org/~pmuellr/weinre/builds/
I chose to click on:
2.0.0-pre-H41DGW8S-incubating/ (29-Jun-2012 14:53)
. . . then clicked on:
apache-cordova-weinre-2.0.0-pre-H41DGW8S-incubating-bin.tar.gz (29-Jun-2012 14:53 2.4M binary archive)
It was put into my Downloads folder at apache-cordova-weinre-2.0.0-pre-H41DGW8S-incubating-bin
2. Go to http://whatismyip.com and note your IP address, which looks something like this:
3. Open Textedit and type in the following. In the first line, type in the IP address you received from step 2:
boundHost: [your IP address] httpPort: 8080 reuseAddr: true readTimeout: 1 deathTimeout: 5
(These lines are explained at http://people.apache.org/~pmuellr/weinre-docs/latest/Running.html)
4. Save it to the folder in step 1 as server.properties (without the quotes or suffix). Weinre will use these settings when starting up.
5. Double-click on the weinre file in the folder from step 1. A Terminal window will open, showing that the server has been started at http://localhost:8080 (your number might be 8081).
6. Open your Webkit-compatible web browser and copy/paste step 2’s entire localhost URL into the URL field and hit Enter/Return. If the server is running, you’ll see Weinre information.
7. Open your PhoneGap app project’s index.html page and copy/paste (“inject”) the following line just above any the other scripts in the <head> section:
You may substitute “yourAppName123” with your true app name or any other unique string of text (or leave as is – don’t you love freedom of choice?).
8. Also type this sample code just above the </head> tag in the index.html file so we can output some sample content to the Weinre console:
. . . and put this code just above the ending </body> tag so we can execute the above code and view it on the Weinre console:
Save your file.
9. In Xcode, open your app, then open up [app name] > Supporting Files > Cordova.plist. For the ExternalHosts Key, add a new line (click and hold your cursor over the ExternalHosts name, then click on the plus icon that appears), and type in your IP address in the Value field at right for the new row that appears. Leave the Key and middle column entries as is.
10. Attach your device to your Mac and hit Run in Xcode.
11. After the code is running in your device, visit http://debug.phonegap.com/ and type this portion of the script from step 7:
. . . into the Step 1 field in the browser. You should see the link update with your text substituted. Make sure it matches what you pasted into your index.html file.
12. Now hit the link in Step 3. After a moment, you should see your device info on the screen, showing your IP address and index.html file location on your hard drive. Just above that information appears the Web Inspector tabs: Elements, Resources, Timeline, and Console. Remote is at the far left and is, as mentioned before, unique to Weinre.
13. Click on the Console tab in the browser. The console text from the script in step 8 should appear.
14. Click on Console in the browser, type the following underneath and hit Enter/Return:
alert("From Weinre to the device!");
. . . and the alert should display in the device.
9. If you click on the Remote tab, you might find none under Devices. I think this means a timeout has occurred. Merely return to step 11 above and continue.
For security concerns, you should run this only as needed.
If you return to the Remote tab and see an IP address different from yours, I don’t really know what that means, so I recommend shutting down the Terminal app and starting again (step 5 then 10 on).
A little more about Weinre
When using weinre, there are three programs interacting with each other.
This is the HTTP server that you run from the weinre-node distribution. It’s the HTTP server that’s used by the Debug Client and Debug Target.
This is the Web Inspector user interface; the web page which displays the Elements and Console panels, for instance.
Related links of interest
http://people.apache.org/~pmuellr/weinre/docs/latest/ (weinre home) http://people.apache.org/~pmuellr/weinre/builds/ (downloads)
https://groups.google.com/forum/?fromgroups#!forum/weinre (Weinre Google Groups)