Opera Mobile Emulator for desktop

Figure 1: The Opera Mobile Emulator running on Mac.

Introduction

Making sure that your site looks great and works exactly as it should in mobile and tablet browsers can often be a tedious process — you typically need one or more physical devices, or some form of virtual machine emulating the whole operating system, and that’s just the start.

Our Opera Mobile Emulator for Windows, Linux and Mac makes things a whole lot easier.

It’s 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 is practically identical to the experience your end users will get.

The launcher

When you first open the Opera Mobile Emulator, you’re presented with the launcher app — see Figure 2. This launcher allows you to create different instances of Opera Mobile on your desktop to accurately test different phone configurations, as seen in Figure 3. Here we will discuss the different options available in the launcher.

Profiles

The launcher comes preconfigured with a series of popular phone and tablet device profiles, such as the SEMC Xperia Ray, Samsung Galaxy Tab 10.1 and the Nokia E63. You can then start an Opera Mobile instance using the selected profile by clicking on the Launch button.

If you want to create a new profile, select the Custom option from the profile list and set the relevant options for Resolution, Pixel Density, Input and Arguments. When you're all set, select the Add button under the profile selection box, choose a name for the new profile, and save it to the list. Note that you can also tweak existing profiles via the Update button appearing below the selected profile, or delete them using the Remove button.

Figure 2: The Opera Mobile Emulator’s launcher.

Screen resolution

Mobile phones and tablets come in varying shapes and sizes. The screen resolution can be changed by choosing between the different options in the Resolution dropdown menu. You can also create your own custom resolutions using the Add button, and delete the existing ones using the Remove button.

Pixel density

In the same manner as screen resolution, you can choose the pixel density — which primarily affects Opera Mobile's default zoom factor — using the dropdown menu in the Pixel Density section. 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 three options to choose from: Touch, Keypad and Tablet. The Touch option will give you our touchscreen phone UI, whereas choosing Keypad will result in our UI for phones with only keypad input. The Tablet option enables Opera Mobile’s tablet-optimized touch UI. To learn more about the differences between these modes, see the input mode section below.

Figure 3: Multiple instances of the Opera Mobile Emulator with different screen sizes and input modes.

Arguments

To conclude with the various launcher sections, the Arguments field allows you to add various command line options to the Opera Mobile instance you’re launching. You can find an overview of the available arguments by clicking Help on the launcher.

Some of the more interesting arguments include:

• -displayzoom PERCENTAGE: this allows you to display the full browser window at a percentage of its original size. This is useful when the Opera Mobile instance you spawn has a larger height than the height of your computer and you want to make it fit: e.g. the HTC Desire profile triggers Opera Mobile to have a size of 480×800px, but my MacBook Pro's dock and menu bar reduces this to be 480×702px, distorting the profile's proportions. By using -displayzoom 80, the browser is rendered at 384×640px (preserving the aspect ratio), but the browser still behaves as if it was 480×800px.
• -delaycorethread DELAY: this allows you to delay each message in the Presto thread by a certain amount of ms, so as to emulate a slow device.

Launching Opera Mobile instances from the command line

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

• -geometry widthxheight
• -ppi — set the pixel density you want to use
• -notouch — switch to keypad mode
• -notouchwithtouchevents — same as -notouch, but it’s still possible to use the mouse for easier debugging
• -tabletui — switch to the tablet UI

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 as a keypad device with FWVGA in portrait orientation, we’d use the following commands:

• On Windows: OperaMobileEmu.exe -geometry 854x480 -notouch
• On Linux: operamobile -geometry 854x480 -notouch
• On Mac: ./Opera\ Mobile -geometry 854x480 -notouch

The default location of the Opera Mobile Emulator's executable will depend on your operating system. By default, you should find it here:

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

Input modes: touch, keypad and tablet

In Touch and Tablet 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 field (such as form elements in a web page, or the browser's own address bar) will trigger an emulated on-screen keyboard, but you can of course use your regular keyboard for convenience. 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: simply scroll the mouse-wheel while holding CTRL (Windows and Linux) or ⌘ (Mac). On Mac OS X 10.6 and above, you can even use pinch zoom from the trackpad.

In Keypad mode, the primary controls are:

• Cursor keys can be used 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 map to the top left and right soft keys, which activate the functions at the bottom of the screen.
• Enter can be used to activate a control, zoom into the page, etc.

For your debugging convenience, Keypad mode now comes with mouse interaction enabled by default (in other words, -notouchwithtouchevents is the default), allowing you to click on the different UI and page elements. If you prefer the emulator to just respond to keyboard input (for a more authentic experience), you can add a -notouch argument when initiating an Opera Mobile instance from the launcher.

In all input modes, ALT / ⌥ + R is used to simulate a device rotation (or you can click the Rotate screen button in the info bar at the bottom), switching between portrait and landscape mode. F5 or CTRL / ⌘ + R on the other hand reload the current page.

Also note that in all modes you can select all, cut, copy and paste using the standard OS clipboard and shortcut keys. In addition, CTRL / ⌘ + E allows you to open the last string copied to the clipboard as a URL in a new tab. You can also use TAB and SHIFT</kdb>+TAB to navigate between form elements and backspace to go to the previous page.

Features and settings of the browser

In general usage, the desktop version of the Opera Mobile Emulator offers developers the same functionality available on mobile phones and tablets, including integration of Opera Turbo and Opera Link, which allows you to sync your bookmarks with other Opera instances.

Figure 4: Changing settings in the Opera Mobile Emulator.

As with Opera Mobile running on devices, the Settings (Figure 4) give quick access to toggle various features and, under Privacy, to clear the history, passwords, cookies, cache and shared locations.

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

User Agent string

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

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

When running in tablet mode, the UA string is slightly different, replacing Opera Mobi with Opera Tablet, so as to avoid that sites that use browser-sniffing send a mobile/small-screen optimised version to large-screen tablet device.

Opera Mobile on devices allows users to switch their UA string in the Advanced > User Agent settings dialog between Mobile and Desktop (the latter matching the most recent version of Opera for desktop). The Opera Mobile Emulator adds the User Agent option directly to the main Settings dialog and extends the available options, giving developers the ability to have the emulator identify itself as Opera Mobile on S60 (not available in Tablet mode), Android, MeeGo and Desktop (Figure 4). It is worth noting here that the UA string is not tied to any specific launcher profile, and can only be changed after the browser instance is launched.

If you need to set a totally custom UA string, then this can be done as well: open opera:config, search for the Custom User-Agent property in the User Prefs section, give it your preferred UA string value and save. To revert to the default value, simply click the Default or Reset button.

Remote debugging

Using Opera Dragonfly’s remote debugging functionality, you can analyze and debug pages running in the Opera Mobile Emulator — see Figure 5.

Figure 5: Remote debugging with Opera Dragonfly

Setting this up is a simple three-step process, which is explained in great detail in our Opera Dragonfly field guide.

Conclusion

We hope that the Opera Mobile Emulator makes it even easier to develop, optimize and debug on mobile and tablets. Happy testing and debugging!

Andreas Bovens

Andreas is based in Oslo, from where he heads up Opera Software’s Developer Relations team. The team evangelizes open web standards, takes care of product management of developer tools such as Opera Dragonfly and the Opera Mobile Emulator, and focuses on solving compatibility issues so sites work well in all Opera browsers.

This article is licensed under a Creative Commons Attribution 3.0 Unported license.