Mobile Development with Cordova (Phonegap): Chapter 9

Chapter 9: Debugging with weinre

Smartphones and iPads do not have Firebug, F12 Tools, etc. but there is a tool called weinre which can fill the same role. weinre is Web Inspector REmote. The author says it can be pronounced like "winery" or like "wiener" which I consider a great show of sportsmanship and humor on his part. :-)

A basic overview:

• weinre runs as a server listening on a socket
• it's written in Node, so will run on OSX, Windows, and Linux
• your index.html embeds a <script> tag which loads weinre into the running mobile application
• you point your PC's browser at weinre's console page, and get a virtual console much like Chrome's F12 tools, with the other end connected to the mobile app

So, steps:

Install NodeJS and weinre
These are well documented on their respective websites, and I don't need to repeat it.

Start up weinre and note the port number
Again, this is documented as part of weinre's own process. The important part is to take note of the TCP port number, then to verify that this port is allowed into your PCs firewall. Linux and OS X, you would adjust your firewall settings to specifically allow this port number. On Windows, you would enable that port specifically for the application node.exe

In our case, we set up weinre on our web server instead of on a local PC, so that we could use it on our various projects without dealing with the variations in our PCs' individual firewalls. This also allows us interesting opportunities, such as having me check out the console while the app runs on someone else's phone -- something you can't do if your weinre is running on localhost on your LAN.

Add the <script> tag
Insert this code into index.html:

<script src="http://192.168.100.1:8080/target/target-script-min.js#YOURAPPNAME"></script>

Replace YOURAPPNAME with some meaningful name for you app or session. It could be your app's name, your own name, anything that would keep two people from becoming confused if they were using weinre at the same time.

Of course, replace 192.168.100.1 with the hostname of your own weinre server, be that your own PC or the one you run on your website.

Open your browser
Then visit the corresponding URL where YOURAPPNAME matches whatever you used in the app:

http://192.168.100.1:8080/client/#YOURAPPNAME

This opens up the virtual console, where you can begin inspecting the HTML, inserting JavaScript via the console, and so on.




Actually having the F12 developer tools available, is a huge step forward in being able to debug the app once it's on your phone. If you go with the web server setup like we did, you can even have one of your beta testers run the app as you load the console. This is invaluable when debugging issues that only happen on their hardware and not yours.