Debugging QVGA Remotely Using Opera’s Mobile Emulator

It was a hot summers day and all I could think about was “How the hell do I test for screens with sizes of 220px thru 260px?” Our faithful browsers currently on the market such as Chrome, Firefox, Opera and Safari only squeeze down so far and I don’t have a device that small to test with. We need a way to see what small devices look like when no device is within reach and debug them remotely. Now that the belly aching is taken care of, and a few tweets later, we can get started on finding our solution to small screen emulator debugging.

Opera Dragonfly Documentation“With Opera Dragonfly it is possible to debug in separate instances of the Opera browser, as well as other Opera Presto powered user agents. It doesn’t matter if these are located on the same machine or on another device such as a mobile phone or television. When put into Remote Debugging mode, Opera Dragonfly will listen for a connection to the IP address and Port specified. The separate instance of the Opera browser can then connect over a network and pass debugging information across the connection. Opera Dragonfly can then interact with the webpages and applications on the remote instance, just as if it were running locally.”

The first thing we’ll need is the Opera Mobile Emulator. The next items on our list will be the Opera Desktop Browser topped off with Opera Dragonfly. Once our items listed have been attained and are in full working order, we can begin to debug those pesky critters burrowing a hole in our Web App – especially on screens that aren’t 320px x 480px (Sorry iPhone).

Debugging with Opera Dragonfly

Patrick H. Lauke, Web Evangelist and Opera Dragonfly product manager, (re)introduces developers to the Opera Mobile emulator and the remote debugging functionality of Opera Dragonfly. See http://www.opera.com/developer/tools for more information.

What these means for developers is that we now have an amazing ability to debug using an emulator with QVGA proportions. As far as I know the Opera Mobile Emulator is the only emulator on the market that currently allows QVGA detection and live remote debugging in a really useful and pleasant way. Sure, you can certainly open up Eclipse, but be warned your experience will not be pleasant (long load times, inconsistent results, choppy interactions). For those that desire checking breakpoints primarily for small screens then feel free to give http://www.responsinator.com a whirl just be warned there is no easy debugging method with this Web App ( unless you enjoy extreme DOM traversing every time you want to double check something plus constantly refreshing the browser after you’ve uploaded new files to the server). On top of all this madness we can add to that an inconsistent User Agent. Do yourself a favor and just use Opera’s Mobile Emulator and Dragonfly for QVGA emulator debugging.

The Debugging Breakdown

  1. Activate Opera Desktop Browser
  2. Activate Opera Mobile Emulator
  3. Activate Dragonfly from your Desktop Browser : View → Developer Tools → Opera Dragonfly
  4. From the Opera Mobile Emulator, Enter this into the URL address bar opera:debug
  5. Click “Connect” from the emulator debug window and enjoy!

Holy Crap! Did you see those links?

Dennis Gaebel

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design. http://droidpinkman.io.
  1. Hi,

    If you want to test “Mediaqueries” on smaller Screens I can highly recommend the “Responsive Design Mode” in Firefox Nightly and you can also install Firefox Mobile (Fennec) on your Desktop. Both allow you to resize your site easily all the way down. Both are really awesome to test first Mockups and Breakpoints.

    Greets,
    Michael

    1. Hey Mike,

      I couldn’t agree more. The Responsive View Mode with Firefox is quite excellent. If only Firefox had Live Reload with Codekit then I’d be a happy camper! Unfortunately at the time I’m writing this reply, Mozilla doesn’t have AppleScript support which is required to work with Codekit 🙁

  2. May I ask why such bother went into testing for that resolution? It’s not exactly a widely used resolution by any means! (Or is it? Or is it for a specific use-case you have? Or was it just for fun?!)

    1. Hey Jarrod,

      It was important to me that content is still accessible at any constraint. Brad Frost mentioned there are still many phones possessing QVGA resolution. If you browse around you’ll see these small devices are still in the wild plus have a web browser and qwerty capabilities.

      Here’s a link to Verizon with these small constraint devices still being sold. http://www.verizonwireless.com/feature-phones-1.shtml

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…
</code></pre>

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview:
    2012/08/10