Debugging Mobile Web Pages With Opera Developer Tools

If experience has taught me anything its that debugging mobile pages can be a massive pain. Replicating page display issues without a device on hand can prove problematic, and something as simply as testing a number of URL’s can become very time consuming using a touch screen keyboard to enter each location.

Opera Mobile Emulator can help ease some of the burden though, available for Mac, Windows and Linux it allows a developer to simulate a variety of mobile devices directly from their desktop machine. To try it out first head to http://www.opera.com/developer/tools/mobile/ download and then install the appropriate version of the mobile emulator for your platform. The basic use of the emulator is very straight forward simply open it up after installation and you will be presented with a pre-set list of devices the emulator can simulate. If none of the devices fit your requirements you are also able to enter the specific details for a custom virtual device. Launching a device gives you a fully functional mobile instance of Opera to open and test your projects without having to worry about hardware.


To make life easier you can also provide arguments when launching a virtual device, some of the useful arguments that can be used are:

  • -url Open a URL on startup, very handy to go straight to the page you are working on
  • -tabletui: Use the tablet UI
  • -ppi Define the pixel density
  • -notouch Disables the simulated touch environment, forcing navigation

Setting up Opera mobile emulator with Opera Dragonfly for debugging.

Being able to see your pages rendered in a simulated environment is useful, but most developers probably long for more. One thing that makes debugging issues in a normal desktop browser easier though is tools having access to tools like Firebug or the web developer tool bar to help with the task. In a mobile browser these tools are not available and a developer cannot even view the source code normally for a page if the need arises. Fortunately the Opera Mobile Emulator can be used in conjunction with Opera Dragonfly a built in debugging feature of their desktop browser to make this task easier.

To use the two in conjunction you will first have to download and install the main Opera browser from http://www.opera.com/download/.

Open Opera, accept the EULA, then press SHIFT + CTL + I keys at the same time and Opera Dragon will open up. For those familiar with Firebug at a glance it looks very similar.

To enable remote debugging click the button labelled “remote debug configuration” (its the fourth button from the right up the top of Opera Dragon.

Simply press apply to enable debugging on the default port and the window will report it is now listening for incoming connections on port 7001.

Now open up the Opera mobile emulator, select the device you would like to simulate and then press launch to open the browser environment.

In the address bar now enter “opera:debug” and hit enter. If you are running the main instance of Opera on the same machine as the mobile emulator you can use the defaults on the resulting page otherwise enter the IP address of the machine running Opera Dragonfly and press the connect button.

With any luck the window should now report that its connect to the Dragonfly panel. Now using the mobile emulator browse to the location you would like to debug, now look in dragon fly and you should be able to see the various elements from the page.

If you have multiple tabs on in the mobile emulator you may see the wrong page being displayed in the debugger. To focus on the correct tab click the button to the right of the “Remote Debugging Configuration” button you clicked earlier. This will display the tabs you have open in mobile emulator and allow you to change focus to the desired window.

You can now debug and mobile pages you are having issues with remotely in the Opera Dragonfly window…… Happy coding!

Leave a Reply

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