14 Days Free Technical Video Training from WintellectNOW

  

A device emulator guide for cross platform development on ASP.NET and jQuery Mobile development

Tags: jQuery Mobile, ASP.NET, Mobile Web Development

You want a Web site that renders mobile friendly content that is viewable, accessible, and interactive for the user. Native device developers have a bit of convenience when it comes to this as they target a specific device OS and browser. It is impossible for Mobile Web developers to test for every device browser he or she needs to target, since there are so many variations and combinations of operating systems + browsers. This is where emulators help. Emulators are software that behave the same way the physical device itself would behave. For example, a WP7 emulator looks and acts just like a real WP7 phone. It loads pages, displays content, and allows you to fill in HTML forms, and interact with HTML pages.

Device testing is a lot like cross browser testing for desktop browsers such as IE, Chrome, FireFox, Safari, etc... (which you still have to do). While you will be unlikely to be able to test for every single type of device and browser on the market, this post will cover some the more popular platforms.

Windows Phone 7 Emulator

The Windows Phone 7 emulator ships as part of the Windows Phone SDK 7.1 and integrates with Visual Studio 2010 automatically for WP7 project templates. When working with Web development projects like ASP.NET MVC or Web Forms, the emulator is run from the Start menu, desktop shortcut, or Visual Studio Tools menu; however, before using it in Visual Studio you must add it as an external tool first.

The WP7 emulator executable name is XdeLauncher.exe and it lives in the C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Tools\XDE Launcher\ folder, so it's easily added to the Visual Studio Tools menu. Choose Tools->External Tools, and when the External Tools dialog appears, add a new command by entering the following information:

Title: Phone Emulator

Command: C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Tools\XDE Launcher\XdeLauncher.exe

Arguments (with double quotes): "Windows Phone 7" "Windows Phone Emulator"

Initial directory: C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Tools\XDE Launcher

Prompt for arguments: Uncheck the checkbox

Your dialog should look similar to the image below:

image_thumb

You can then access the phone emulator from the Tools menu in Visual Studio 2010.

image_thumb4

If you prefer, you can run the Windows Phone Emulator solo instead by pressing the Windows key, then typing in Phone Emulator (not case sensitive), to run the program. Of course, you can always use the command line. The WP7 emulator also has some very cool extras like the accelerometer, geolocation/mapping tools, and more. You can even run multiple WP7 emulators simultaneously. For those looking for the master WP7 emulator reference, see everything you need to know about the WP7 emulator.

iOS Emulators

There are many iOS emulators out there, both online, and as desktop versions of software, so you have quite a bit of choice. Here are some iOS simulators that work well:

Electric Plum's ibbdemo iOS simulator runs both iPhone and iPad emulators in the simulator software. The nice thing about desktop software is that you can integrate it with Visual Studio. Online emulators have the advantage of no software installations, and therefore are sysadmin friendly. Below are a few online emulators:

http://www.testiphone.com/

http://iphonetester.com/

KendoUI also has an awesome online multi-device simulator; however, it runs only in Webkit browsers, so you'll need Chrome to use it.

Fun tip: Run online emulators inside of desktop emulator, or on the physical device for 1000 nerd points!

Android & Others

Android | You'll need to do some legwork in the Android space to get setup. The Android emulator is part of the Android SDK, with complete instructions. There is also a nice tutorial about installing, configuring and using the Andoid browser emulator for Windows.

Opera Mini/Multi Device | http://www.opera.com/developer/tools/mobile/

Blackberry/Multi Blackberry OS: | http://us.blackberry.com/developers/resources/simulators.jsp

Of course there's still plenty of devices out in the public, and other emulators on the market if you need them. Check out this comprehensive list of mobile device emulators.

Summary

You can start cross browser development immediately with the emulators shown in this post, and some integrate directly with Visual Studio tools. If you didn't download the Windows Phone SDK 7.1 yet, now is the time!

Note: All emulators listed in this post are free.

What's your favorite emulator (free/paid)? What's your favorite device? What devices do you want to develop for and what devices must you develop for?

10 Comments

  • ratul said

    I lead a team of people working on web projects. I liked your article as a guide, however I strongly discourage using any third party simulators for iOS or Android.

    The render is not at all trustable and there are certain bits and pieces (like viewport meta) which dont work fine on these browsers.

    I thereby suggest this strongly to use only manufacturer provided simulators

  • Greg Shackles said

    The Mono for Android installer helps take a lot of the legwork out of getting the Android environment up and running, even if you don't want to use it for Android development (though you totally should!). It will download and install the JDK, Android SDK, MonoDevelop, Mono for Android, and even sets up a few emulator images for you. The evaluation version is free and doesn't expire, so you don't need to worry about licensing unless you want to publish an app.

    http://xamarin.com/monoforandroid

  • Chip Burris said

    Thought I would just point out that Electric Plum's ibbdemo is now a product called Electric Mobile Simulator. There is a lite version (free) and a pro (paid) version.

    http://www.electricplum.com/

    I used the lite version for about an hour and paid for the pro on the spot. However the free version does everything I needed it to. I just wanted to support the developer.

    The issues I have found with the online iphone/ipad testers is that often they;

    1) do not render the correct user agent string. that becomes a real problem with MVC 4

    2) You can not browse the localhost. kinda hurts development a bit.

    BTW since Electric Plum is an Adobe air app and self contained you may be able to install it without admin rights.Maybe just a folder copy.

    OK can you tell I love Electric Plum ? :)

    Chip Burris
    Mobivant

  • Daniel Herken said

    Thanks for the great list! I think cross-device testing will be the new cross-browser testing soon.

    To help you with both I've created a litte tool which brings all major browsers and simulators for iPhone, iPad and Android to your desktop. It can even be integrated in Visual Studio.

    Check it out if you like: www.browseemall.com

    Cheers, Daniel

  • Satyendra said

    you can easily browse the local host and test the entire app using http://www.testiphone.com/.I do not see any issues with that.

    Thanks,
    Satyendra

  • The Mobile Look said

    We at The Mobile Look have just finished creating an online emulator for all sorts of devices. Maybe this would be of help in testing the design and layout quickly without having to download anything?
    (www.themobilelook.com)

Comments have been disabled for this content.