Entity view (Content)

Weinre - How to Remotely Debug WebKit-based App on Mobile

By jkim
Feb. 13, 2012

As Webkit-based mobile apps (Combine Sproutcore, jQueryMobile, Sencha Touch with PhoneGap) have been popular these days, developers need to debug their apps remotely. There is a good debug tool which is Weinre (WEb INspector REmote). I have used Weinre to debug remotely and it works great (Web Application that Combined jQuerymobile with PhoneGap). Below link to install Weinre. http://phonegap.github.com/weinre/Home.html

After installing Weinre, run Weinre to get Weinre server info For Window, java -jar path/to/wienre.jar For Mac, execute Weinre. In your /.weinre/server.properties file shows your httpPort eg) httpPort: 8081

Next, you need to put below script to your WebKit-based app to enable debug (Index.html). The port number should be matched in your server.properties info. Basically, Weinre uses a web browser to show HTML content files, so open your browser with URL:




You will see Weinre user interface with some info but no Targets and Clients because you haven't been launching the app yet.


If you launch the app on device or emulator, you will see target and client's info in Green. Now you can debug or observe Elements, Resource and console remotely.

Post Tags: