You are here

Weinre - How to remotely debug WebKit-based app on a mobile device

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 web browser to show content of html files, so open your browser with below URL. http://localhost:8081/client/#your app name. eg) http://localhost:8081/client/#myapp 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.

Comments


Jun 20, 2013 at 10:36am

"you need to put below script to your WebKit-based app to enable debug (Index.html)"

I don't see any script after that . Did you forget to attach them? Thank you.

Appnovation Technologies