O'Reilly logo

jQuery Mobile: Up and Running by Maximiliano Firtman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Testing Webapps

We have already mentioned that a jQuery Mobile webapp will work on almost every modern desktop browser. However, it would be better if we could test them in a more accurate environment (see Figure 1-8).

Testing jQuery Mobile accessibility from an iPad

Figure 1-8. Testing jQuery Mobile accessibility from an iPad

To test the mobile webapp in different environments, we can use:

  • Real devices

  • Remote labs

  • Emulators

  • Simulators

  • Lot of friends

Emulators and Simulators

The most useful tools for our work will be emulators and simulators. Generally speaking, an emulator is a piece of software that translates compiled code from an original architecture to the platform where it is running. It allows us to run an operating system and applications on another operating system. In the mobile development world, an emulator is a desktop application that emulates mobile device hardware and operating systems, allowing us to test and debug our applications and see how they are working. The browser, and even the operating system, is not aware that it is running on an emulator, so we can execute the same code as on the real device.

We should also add to our mobile development environment classic tools for project and configuration management, such as bug tracking, version control, and project management tools. Figure 1-8 shows how you can test jQuery Mobile accessibility from an iPhone, iPod, or iPad with iOS 4.0 or higher. Go to Settings General Accessibility and activate VoiceOver. Now close your eyes and browse your website using your fingers and ears.

Figure 1-9 shows how an Android Emulator provides a full Android OS on your desktop with images for different devices including tablets, such as Galaxy Tab or Nook Color.

Emulators are created by manufacturers and offered to developers for free, either standalone or bundled with the Software Development Kit (SDK) for native development.

An Android Emulator

Figure 1-9. An Android Emulator

There are also operating system emulators that don’t represent any real device hardware but rather the operating system as a whole. These exist for Windows Mobile and Android.

On the other hand, a simulator is a less complex application that simulates some of the behavior of a device, but does not emulate hardware and does not work over the real operating system. These tools are simpler and less useful than emulators. A simulator may be created by the device manufacturer or by some other company offering a simulation environment for developers. In mobile browsing, there are simulators with pixel-level simulation, and others that neither create a skin over a typical desktop browser (e.g., Firefox or Safari) with real typography nor render engine simulation. Figure 1-10 shows how the iOS Simulator provides you with an iPad for free inside your Mac. The same can happen for other tablets, also with Windows or Linux desktop machines.

The iOS simulator

Figure 1-10. The iOS simulator

Even with emulators, the final rendering and performance will not be exactly the same as in the real device. Therefore, real device testing is a good practice, even if we are going to do it only on some key devices.

For mobile web development, we will find emulators from Nokia, Symbian, BlackBerry, Android, webOS, and Windows Mobile and simulators from Apple for the iPhone and iPad (though only for Mac OS X).

Some browser-based emulators (that finally work on many different platforms), like the Opera Mobile emulator, are also available.

Table 1-2 shows the available emulators and simulators for download.

Table 1-2. Available mobile and tablet emulators and simulators for download

NamePlatformTypeBrowsers availableWindowsMacLinux

iOS Simulator

iOS

Simulator

Safari

No

Yes

No

Android Emulator

Android

Emulator

Android Browser and downloadable

Yes

Yes

Yes

HP webOS Emulator

webOS

Emulator

webOS Browser

Yes

Yes

Yes

Nokia Symbian Emulators

Symbian

Emulator

Internal Browser and downloadable

Yes

No

No

Windows Phone Emulator

Windows Phone

Emulator

Internet Explorer

Yes

No

No

Nokia Series 40 Emulators

Nokia OS

Emulator

S40, Ovi Browser, Opera Mini

Yes

No

No

BlackBerry Simulators

BlackBerry OS

Emulator

BB Browser, downloadable

Yes

No

No

BlackBerry PlayBook Simulator

Tablet OS

Emulator

Internal Browser

Yes

Yes

Yes

Opera Mobile Emulator

Many

Browser Emulator

Opera Mobile

Yes

Yes

Yes

Opera Mini Simulator

Many

Online Browser Emulator

Opera Mini

Yes

Yes

Yes

PhoneGap Simulator

Many

Simulator

PhoneGap hybrid

Yes

Yes

Yes

Adobe Device Central

Many

Simulator

Many

Yes

Yes

No

An up-to-date list of emulator download URLs can be found at http://www.mobilexweb.com/emulators.

Remote Labs

A remote lab is a web service that allows us to use a real device remotely without being physically in the same place. It is a simple but very powerful solution that gives us access to thousands of real devices, connected to real networks all over the world, with a single click. You can think of it as a remote desktop for mobile phones.

The most useful services on the market are the following:

Keynote DeviceAnywhere (commercial)

http://www.deviceanywhere.com

Perfecto Mobile (commercial)

http://www.perfectomobile.com

Nokia Remote Device Access for Symbian and MeeGo (free)

http://www.mobilexweb.com/go/rda

Samsung Lab.Dev for Android (free)

http://www.mobilexweb.com/go/labdev

For updated information on this topic, go to http://www.mobilexweb.com/go/labs.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required