Opera Mobile emulator for desktop

Introduction

Making sure that your site looks great and works exactly as it should in mobile browsers can often be a tedious process.

Previously, if you wanted to test and debug your mobile-friendly sites, you either needed a physical phone or some form of virtual machine emulating the whole mobile operating system. With Opera Mobile for Windows, Linux and Mac we provide you with the simplest solution: a small, native application that's easy to install on your desktop machine and runs exactly the same code as its mobile phone version — so you can be assured that what you're seeing on your test environment closely relates to the experience your end users will get.

In April 2010, we released a first version of the Opera Mobile emulator, which corresponded with Opera Mobile 10 for S60 and Windows Mobile. Our latest 10.1 beta release takes this a step further and emulates the behavior of our Opera Mobile 10.1 releases for S60 and Android.

The launcher

The main new feature of Opera Mobile for Desktop 10.1 beta is the launcher that you see when you first open the application — see Figure 2. This allows you to create difference instances of Opera Mobile 10.1 beta on your desktop to more accurate test different phone configurations, as seen in Figure 3. Here we will discuss all the different options available in the launcher.

Download Opera Mobile 10.1 beta for Windows, Linux and Mac so you can follow along.

Profiles

The first section in the launcher is "Profile". The drop down menu in here allows you to select different phone profiles to launch, for example "HTC Hero", "HTC Desire", etc. You can then select different further options for these profiles, and launch them using the "Launch" button at the bottom of the launcher.

When you've got a particular profile selected, you can use the "Update" button to save any changes you have made to the options for that profile (they will then be the default options next time you select that profile), and the "Delete" button to delete that profile altogether.

The other option to mention is the "Custom" profile option that is selected by default when you first run the application. When this is selected, you can make up your own custom profile, and save it using the "Add" button (you'll then be prompted to enter a name for your new profile).

Screen resolution

Mobile phones come in varying shapes and sizes. The screen resolution can be changed by choosing between the different options in the "Resolution" drop down menu. You can also create your own custom resolutions using the "Add" button (you'll be prompted to enter a width, height, and name for your new resolution), and delete the existing ones using the "Remove" button.

Pixel density

In the same manner as screen size, you can choose the pixel density your want using the dropdown menu in the "Pixel Density" section of the launcher. As above, you can select options from the menu, add your own custom ones, and remove options as you see fit.

Input

The "Input" section of the launcher contains a dropdown menu with two options to choose from - "Touch" and "Keypad". If you choose the former, basically you'll control the resulting Opera Mobile instance by clicking the mouse on the screen; if you choose the latter, you'll control it using the keyboard. See the Controls: the touch and keypad modes section below for more details on controlling the application.

Arguments

To conclude with the various launcher sections, the "Arguments" field allows you to add various command line style options to the Opera Mobile instance you're launching. You can find more info about the different options in the section below.

Launching Opera Mobile from the command line

Depending on your workflow, you may want to start Opera Mobile 10.1 from the command line. That is entirely possible, with various extra configuration options to boot. The most important ones are:

• -geometry widthxheight
• -notouch — disables touchscreen mode and switches to keypad mode
• -notouchwithtouchevents — same as -notouch (the interface switches to keypad mode), but it's still possible to use the mouse for easier debugging

Note: For a full list of command-line arguments, see the application's help text with operamobile --help.

So, if we wanted to run Opera Mobile 10 as a keypad device with FWVGA (Full-WVGA with 16:9 aspect ratio) in portrait orientation, we'd use the following commands:

On Windows:

OperaMobile.exe -geometry 854x480 -notouch

On Linux and Mac:

./operamobile -geometry 854x480 -notouch

The default location where you can find the operamobile executable will depend on your operating system. By default, you should find it here:

• Windows: C:\Program Files\Opera Mobile 10\
• Linux: /usr/bin/
• Mac: /Applications/Opera Mobile.app/Contents/MacOS/

Controls: the touch and keypad modes

In touch mode, you use the mouse as if it was a finger on an actual touchscreen device. A short click activates links and controls, double-click zooms in and out of a page, while clicking for more than a second (tap-and-hold) brings up the context menu. Scrolling is achieved by clicking and dragging. Any text entry (for instance typing a URL into the address bar) will bring up the touchscreen keyboard, but you can of course use your regular keyboard. If you'd like to suppress the virtual keyboard (to simulate a mobile device with its own physical keyboard), use F6 to toggle it on/off.

Emulating pinch zoom is also possible: scroll while holding the Ctrl key. This key combo also works on Mac, but only if you turn off or change the default settings for "Screen Zoom" in "System Preferences". We're working on implementing an alternative Mac key combo so as to avoid this collision.

In keypad mode, the primary controls are:

• Cursor keys for spatial navigation around the Speed Dial, address bar and search field. On a Web page, the cursor keys move the virtual mouse pointer.
• F1 and F2 mapped to top left and right soft keys, which activate the functions at the bottom of the screen.
• Enter and F5 to activate a control, zoom into the page, etc. (there is actually a subtle distinction between the functionality of the two keys — in general usage they're equivalent, but Enter is also used for newline/linebreak characters, such as when entering information into a textarea field).

Note: If you started the application with the -notouchwithtouchevents flag, you'll still be able to use your mouse for all these functions, which can make testing on your desktop machine more efficient but will give you a different experience from using the "proper" keypad controls.

In both modes, Ctrl/Cmd + R is used to simulate a device rotation, switching between portrait and landscape mode.

Although at its core Opera Mobile 10.1 on desktop contains exactly the same code as its mobile phone version, it behaves like any other native application. As a result, you can cut, copy and paste using the standard OS clipboard and shortcut keys (such as Ctrl/Cmd + X, Ctrl/Cmd + C, Ctrl/Cmd + V).

Features and settings of the browser

In general usage, the desktop version of the Opera Mobile 10.1 Web browser offers developers the same functionality available on mobile phones, including integration of Opera Turbo — our transparent compression proxy — and Opera Link — synchronisation of bookmarks, Speed Dials and settings between different Opera browsers. See our overview of Opera Mobile's user experience and features and our recent Opera Mobile 10 developer's introduction.

Note: Although of limited use for testing, Opera Mobile 10.1 beta for Windows, Linux and Mac retains the ability to download files and save pages in MHTML archive format. The default location where these files are saved will vary depending on your OS.

As with Opera Mobile 10.1 on mobile phones, the Settings dialog - see Figure 4 - gives quick access to toggle certain features (like Mobile view, which reflows a page's layout to a single column) and, under Privacy, to clear the history, passwords, cookies and the cache.

Power-users can enter the opera:config internal URL into the address bar for complete access to all configuration options.

User Agent string

The default UA strings for Opera Mobile 10.1 on Windows, Linux and Mac are:

• Opera/9.80 (Windows NT 6.0; Opera Mobi/[BUILD_NR]; U; en) Presto/2.5.28 Version/10.1
• Opera/9.80 (Linux i686; Opera Mobi/[BUILD_NR]; U; en) Presto/2.5.28 Version/10.1
• Opera/9.80 (Macintosh; Intel Mac OS X; Opera Mobi/[BUILD_NR]; U; en) Presto/2.5.28 Version/10.1

Unique to the desktop version is the ability to modify this in the User Agent settings dialog to mimic the Nokia/S60, Windows Mobile and Android versions of the browser:

• Opera/9.80 (S60; SymbOS; Opera Mobi/[BUILD_NR]; U; en-GB) Presto/2.5.28 Version/10.1
• Opera/9.80 (Windows Mobile; WCE; Opera Mobi/[BUILD_NR]; U; en) Presto/2.5.28 Version/10.1
• Opera/9.80 (Android; Linux; Opera Mobi/[BUILD_NR]; U; en) Presto/2.5.28 Version/10.1

"Local" remote debugging

With Opera Dragonfly you can check pages running in Opera Mobile 10.1 directly from within your main browser, giving you access to the full power of our debugging tool — see Figure 5.

Setting this up is really straightforward:

1. Open Opera Dragonfly in Opera desktop and activate remote debugging under "Settings" > "Remote debug".
2. Open Opera Mobile 10.1 on your desktop, go to opera:debug, and hit "Connect"
3. You can now inspect the DOM, scripts and more for any page open in Opera Mobile 10.1.

As Opera Mobile 10.1 for desktop runs on the same machine as Opera Dragonfly, there's no messing around with IP-addresses and port numbers — the default loopback/localhost address of 127.0.0.1 and standard port of 7001 should always work fine.

Conclusion

We hope that with Opera Mobile 10.1 beta for Windows, Linux and Mac we've made it easy and straightforward for developers to optimise their sites for mobile delivery. So what are you waiting for? Happy testing and debugging!