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.
- a DOM browser
- a Ressources overview
- a Network tab (for debugging XHR [AJAX] and other)
- a Timeline tab for checking load times
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:
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:
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: