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).
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
- Activate Opera Desktop Browser
- Activate Opera Mobile Emulator
- Activate Dragonfly from your Desktop Browser : View → Developer Tools → Opera Dragonfly
- From the Opera Mobile Emulator, Enter this into the URL address bar
- Click “Connect” from the emulator debug window and enjoy!