iOS Emulation for PhoneGap Using Chrome

Using Chrome For Mobile App Development

We do a fair bit of iOS development. Often we’ll leverage the Cordova / PhoneGap platform and a few tricks to jack up the performance of the WebViewUI.

And when using Cordova / PhoneGap, our development starts in a web browser and finishes in XCode. We always need to get our hands dirty in XCode for the tricky bits. But the more work we can keep in a web browser, the easier it is for the team.

  • Reduces tools used by development team
  • Quicker turn around between writing & testing code
  • Easier debugging
  • Easier to distribute tasks

So in a recent release of Chrome, I was quite happy to see device emulation added to the developers console. Specifically iPhone and iPad emulation.

Find Developers Tools > JavaScript Console

Find Developers Tools > JavaScript Console > Emulation > Devices

iOS devices get grouped as follows:

  • iPad 1 / iPad 2 / iPad Mini
  • iPad 3 / iPad 4
  • iPhone 3GS
  • iPhone 4
  • iPhone 5

Chrome is not a replacement for XCode’s iOS Simulator but Chrome emulates some very useful things for us:

Property Description
Viewport The viewport reflects the screen size of the device
Pixel Density Modern iOS devices have a higher pixel density than the typical desktop monitor. For example, the same icon is 100x100 on iOS and 50x50 on a desktop.
User Agent Device-specific User Agent override the default
Touch Touch events are emulated in place of click events
Geolocation Use a specific LAT LONG or toggle position unavailable
Accelerometer Simulate motion and device orientation with alpha, beta & gamma states
Text Autosizing Fonts sizes (especially REM sized fonts) are scaled appropriately

I find Touch, Viewport, Pixel Density and Geolocation emulation are very useful in day-to-day development and allow for a high-degree of confidence when developing iOS apps.

Compare these two screens of an app I’m currently working on. One is Emulation in Chrome and one is the iOS Simulator.

iPad 4 (Retina) Emulation In Chrome

iOS 7 iPad 4 (Retina) In iOS Simulator

You can see the Viewport size, positioning of elements & pixel density are dead-on. And take my word for it, might Touch-based swiping events work as well.

Even without access to XCode’s iOS Simulator, Chrome’s Emulation allowed someone to flesh out a very accurate app screen.

That said, Chrome and iOS do have slightly different renderings of the same font. And Chrome doesn’t emulate the virtual keyboard that appears on input:focus in iOS, but it’s very good for free.

None of these are strikes against Chrome, just things to be aware of.

Enjoy!

This article was authored using Markdown for Sitecore.

Fish