Mobile Browser Testing on the Desktop

If you need to check websites for mobile compliance on a regular basis you know that having a device to constantly check is painful and slows down your work during debugging and phases of constant change.

Creative Commons Attribution 2.0 Generic License (http://creativecommons.org/licenses/by/2.0/) by adactio

There are a few tools that will make this work a lot easier:

Google Chrome

Chrome does have some nice dedicated plug-ins to help with this task

• Ripple Mobile Environment Emulator (https://chrome.google.com/webstore/detail/geelfhphabnejjhdalkjhgipohgpdnoc)
• appMobi HTML5 XDK (https://chrome.google.com/webstore/detail/onmkoldigcfmebcinpmineoadckalllb)

Firefox

I am not aware of any plug-ins like Chrome, but as a hack I have found it useful to employ a user-agent switching plugin to trick the browser

User Agent Switcher (http://chrispederick.com/work/user-agent-switcher/) works well for this.

1. Download the User Agent Switcher Add-on for Firefox
2. Restart Firefox for the add-on change to take place.
3. To start a new browsing session using an emulated browser, go to Tools > User Agent Switcher and select the appropriate mobile web browser you want to emulate
4. To switch back to normal browsing, just select the default option from the above menu.

If you need more specific UA Strings check here: http://www.zytrax.com/tech/web/mobile_ids.html

For more serious work there are obviously dedicated emulators from the major Mobile OS vendors (but they need to be installed and configured for each platform):

• Android (http://developer.android.com/guide/developing/tools/emulator.html)
• iOS (http://developer.apple.com/devcenter/ios/)
• WinPhone (http://www.microsoft.com/download/en/details.aspx?id=13890)
• Nokia (http://www.developer.nokia.com/Develop/Web/)
• Opera (http://www.opera.com/developer/tools/mini/)
• WebOS (http://developer.palm.com/)

PS: Nothing substitutes final QA testing on actual devices …

• Browser
• Desktop
• Mobile
• Testing