Ripple is a Chrome extension (http://ripple.tinyhippos.com/) that turns your browsers into a mobile phone emulator allowing you to use the chrome dev tools to inspect your JS app in the DOM. In Ripples own words:
“Ripple offers the ability to look under the hood of your mobile application, giving you full visibility into what it is doing. It also allows for the use of existing tools to perform JavaScript debugging, HTML DOM inspection, automated testing, as well as multiple device and screen resolution emulation in real-time without having to redeploy the mobile application or restart the emulator.”
To test your app like this you’ll need to host your mobile app source code dir as a web app on an http server such as apache, jetty or tomcat. For example if you’re developing an android project in Eclipse you could deploy the html5 app on tomcat you can modify the $TOMCAT_HOME/conf/server.xml to include a new context entry within the host element. Here’s an example:
Restart tomcat then you should be able to hit your app in the browser using the context path specified in your xml (nb: you must enable ripple for this url by clicking on the ripple icon). You can then use the Chrome dev tools to inspect the DOM.
It’s well worth it as much quicker to see a change (hit refresh) and you can see where most the app is running – the DOM! Ripples active forum is also here http://ripple.tinyhippos.com/forums/.
