Problem

You want to create a mobile web-application but are missing the great debugging tools like Firebug or Developer Tools that Desktop browsers offer you.

Solution

There is a great tool called "weinre" by the phonegap developers that helps you with this task. It injects a piece of javascript into the target page and offers you a developer-tools-like interface on your desktop pc to debug your mobile page.

You get:

  • a DOM browser
  • a Ressources overview
  • a Network tab (for debugging XHR [AJAX] and other)
  • a Timeline tab for checking load times
  • a Scripting console for fetching javascript errors and running code manually.

Discussion

Running weinre

You either download the mac-app or the JAR file of the weinre server. The server is based on JAVA, so it doesn't matter on which OS you are trying to run it.

We will go the JAR file approach via the command line here. Make sure the computer where you intend to run weinre on is accessable from the mobile phone which you want to use for debugging. The best approach is to hook both to the same local network and use it for debugging. After downloading the JAR file from the weinre page, run the following command in your console:

java -jar [yourpath]/weinre.jar --boundHost [YOUR_IP]

This should give you an output like this:

2012-01-06 21:32:22.804:INFO::jetty-7.x.y-SNAPSHOT
2012-01-06 21:32:22.835:INFO::Started SelectChannelConnector@[YOUR_IP]:8080
2012-01-06 21:32:22.835:INFO:weinre:HTTP server started at http://[YOUR_IP]:8080

Now weinre is running and you can debug websites that are hosted by the same computer where weinre is bound to.

Bringing weinre to your phone

To make a website available for debugging with weinre, it has to load the following file:

http://localhost:8080/target/target-script-min.js

Now you have multiple ways to get your page load the needed script file.

Embed the script
You can place the following code inside your website:

Using a bookmarklet
Or you can create a bookmarklet in your phone's browser, injecting the script direct into the dom. This has the advantage that you don't have to alter the page source, but is very ineffective for multi-page apps, since you have to run the bookmarklet again after every page load. Here is the bookmarklet:

javascript:(function(e){e.setAttribute("src","http://[YOUR_IP]:8080/target/target-script-min.js");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);

Running the client on your computer

Getting the debugging tool shown on your computer is very easy. Just point your browser to the follwing URL:

http://[YOUR_IP]:8080/client

More Information