Earlier this month the PhoneGap team held the first PhoneGap day. This was in part to celebrate the release of PhoneGap 2.0, but more importantly to bring together members of the PhoneGap community to share and learn from each other. There are great recaps of PhoneGap Day from RedMonk, as well as on the PhoneGap blog. One of the new services announced on PhoneGap Day was emulate.phonegap.com. Emulate.phonegap.com enables an in-browser simulator for developing and debugging PhoneGap/Cordova applications, complete with Cordova API emulation. It is built off of the Ripple Emulator, which itself is open source and may even be contributed to the Apache Cordova project.
Emulate.phonegap.com is built as a Google Chrome Extension, so it requires the Chrome browser. It also uses the Ripple Operating Environment (another Chrome Extension). Once you have the dependencies installed you can emulate any site as a PhoneGap/Cordova application by either going to emulate.phonegap.com and entering the target URL, by launching the emulator from a right-click -> Emulator -> Enable, or by clicking on the Ripple icon in the Chrome toobar, and selecting the “Enable” option.
Once launched, the URL that you want to simulate will be displayed within the Ripple operating environment view.
Note: This only works with assets that are on a live URL. You can use a local http server with references to localhost, however the emulator will fail if you try to access your application directly from the local file system using a file:// URI.
Update: You can enable access to local files by changing a few settings on the Ripple emulator. See the first comment on this post for additional detail.
(click for full-size image)
The emulator environment gives you the ability to emulate PhoneGap events and API calls, without having to deploy to a device or run inside of the iOS, Android, Blackberry, or other emulator. Not only can you simulate the PhoneGap/Cordova API, but you can also use Chrome’s debugging tools to test & debug your code – complete with breakpoints, memory inspection, and resource monitoring. This is a handy development configuration. It enables app development within a rich debugging environment that is familiar, fast & easy to use. This does not replace on-device debugging however… nothing will replace that. On-device debugging is extremely important; this helps increase your productivity as a developer.
So how do you use this environment? The environment will handle Cordova API requests, and you can also simulate device events.
First, the “Devices” panel… In this panel you can select a device configuration – Everything from iOS, to Android, to BlackBerry. Changing the device configuration will not only change the physical dimensions, but will also change Device/OS/user agent settings reported by the application. Here you can also select the device orientation, which will change the visual area within the simulator.
Within the “Platforms” panel you can choose the platform you wish to emulate. With respect to PhoneGap applications, you will want to choose “Apache Cordova”, and then select the API version that you are using. By default, it uses “PhoneGap 1.0.0”, however you can chose “Apache Cordova 2.0.0” to get the most recent version. The Ripple emulator also simulates BlackBerry WebWorks and mobile web configurations as well.
The “Information” panel shows you information about your current simulator configuration. It shows the platform, device, simulated OS, user agent etc…
The “Accelerometer” panel can be used to simulate device orientation/accelerometer events. Just click and drag on the device icon (the gray and black boxes), and the icon will rotate in 3D. As you drag, accelerometer events will be dispatched and handled within your application. From here, you can even trigger a “shake” event.
The “Settings” panel lets you turn on/off the cross domain policy, adjust the UI color theme, and view additional data about the Ripple emulator.
The “Device & Network Settings” panel enables you to simulate and throttle the network connection type: “Ethernet”, “WIFI”, “CELL_3G”, etc…
The “Geolocation” panel enables you to simulate your geographic position within your PhoneGap/Cordova application. You can specify a latitude, longitude, altitude, speed, etc… You can even drag the map and use it to specify your geographic position. The position that you set within the geolocation panel will be reported when using navigator.geolocation.getCurrentLocation().
The “Config” panel is a graphical representation of your PhoneGap Build Config.xml file. You can use this to easily view/analyze what’s in your application configuration.
The “Events” panel can be used to simulate PhoneGap specific events, including “deviceready”, “backbutton”, “menubutton”, “online”, and “offline” (among others). Just select the event type, and click on the “Fire Event” button.
As I mentioned earlier, this won’t replace on-device debugging. It also won’t handle execution of native code for PhoneGap native plugins, however you can test/develop against the JavaScript interfaces for those native plugins. Emulate.phonegap.com will definitely help with development of PhoneGap applications in many scenarios, and is a nice complement to the Chrome Developer Tools.