PhoneGap Blog

All PhoneGap PhoneGap Build PhoneGap Network
Introducing PhoneGap Emulation
by Michael Brooks | 10 Aug 2012 | PhoneGap Blog, Tutorial, Guide

At PhoneGap Day US 2012, Dan Silivestru spoke about the Ripple Emulator and proudly announced emulate.phonegap.com.

About

Debugging a mobile web application is not easy and a PhoneGap application is even more difficult. PhoneGap Debug uses Apache Cordova’s Weinre to help you inspect the DOM and JavaScript of your PhoneGap app. However, it’s also helpful to test your application before deploying to a device. You can accomplish this on your desktop browser, which offers a richer set of debugging tools, such as Chrome’s Developer Tools.

This is where PhoneGap Emulation steps-in. With your Google Chrome desktop browser, you can emulate PhoneGap’s JavaScript APIs. This includes everything from the deviceready event to navigator.device.capture to your custom plugins. By leveraging your desktop browser, you can speed up your initial development process and quickly debug the DOM, JavaScript, and resource loading.

It’s important to understand that PhoneGap Emulation only applies to JavaScript. While the emulator will use a device skin, it cannot emulate the rendering capabilities of a specific mobile platform browser.

Powered by the Ripple Emulator

Under the hood, PhoneGap Emulation is powered by BlackBerry’s Ripple Emulator. The emulator was originally created by the folks at TinyHippos and is now part of the BlackBerry WebWorks SDK. This is a powerful open source tool that the PhoneGap team feels is unutilized in the world of mobile web development.

Requirements

PhoneGap Emulation has two requirements: Google Chrome and the Ripple Emulator Extension.

While it would be nice to remove both of these requirements, we’re not there yet. On the upside, Google Chrome has some of the best developer tools around, including Touch Event Emulation, and a rapid update cycle that continues to add modern features, such as the File System.

Usage

There are two ways to use PhoneGap Emulation: Web Interface or API.

Web Interface

Browse to emulate.phonegap.com and enter the URL to emulate.

You can emulate any URL that is accessible from your computer, including localhost and intranet addresses.

Web API

Automatically invoke Ripple by making a request with the query-string parameters.

Example: http://emulate.phonegap.com?phonegap.com

How to Contribute

Both PhoneGap Emulation and the Ripple Emulator are open sourced and available on GitHub. Please fork, submit issues, and send pull requests!

Source code for emulate.phonegap.com

https://github.com/phonegap/emulate.phonegap.com

Source code for the Ripple Emulator

https://github.com/blackberry/Ripple-UI

blog comments powered by Disqus