Debugging websites on mobile devices with Opera Mobile and Dragonfly

I have previously written about how you can debug mobile websites with a tool called Weinre. Now I will explain another way to debug sites, this time, with Opera Mobile, and Opera Dragonfly.

I will be demonstrating this on a Galaxy S 2, with Opera Mobile 11.10 on Android  and Opera desktop version 11.50.

This is Opera Mobile, not Mini, which is a different browser.

This will not work for iPhone or iPad since Opera Mobile is not allowed into App store since it is too “similar to safari”.

As we developers know, it is quite difficult and cumbersome to inspect a websites source code, css, javascript or layout, from a mobile browser, like you can in a desktop browser with tools like Firebug.

Dragonfly is a tool that can be used to debug and edit websites on your mobile device, from your desktop computer.

I will be showing how to connect to your phone, and start debugging away!

Dragonfly

  • Dragonfly is Operas version of Firebug and Chrome developer tools.
  • It comes bundled with the desktop version of Opera.
  • It is a webapp, which automatically updates itself.
  • You can open it by pressing Ctrl + Shift + Ior by clicking the main menu -> Page- Developer tools -> Dragonfly

You may also want to place the quick access button in your toolbar, to do this,
press Shift + F12 -> Buttons -> Browser View, and then drag the Dragonfly button onto your toolbar, like illustrated below.

Connecting for Remote debugging

  1. When you have opened Dragonfly on your computer, click on the “Remote debug configuration” button, set a port number (default 7001 should work in most cases), and hit apply.
  2. Find the local IP address of your computer
  3. Connect your phone to the same network as your computer, by wifi.
  4. Open Opera Mobile on your phone, and go to about:debug in the url bar.
  5. Enter the ip address and port number of your computer, and hit “connect”.

If it connects properly, Dragonfly should start loading the html of the currently active website in Opera Mobile, which will be the “Connect to debugger” website where we hit the connect button. It will look something like this:

If you expand the DOM, and mouse over or click the H1 tag (like I did in the picture), you should see the header beeing selected in Opera Mobile, on you phone!

Doing some editing

Now I can for example edit the header of the website, by double clicking it, and entering some new text.

And the changes appear on the phone instantly, “New Header”:

I can also change some color via css to turn the header green:

And it is displayed instantly on the phone:

Debugging another website

Now, this was just for demonstration, you probably want to debug or mess with some other website,  you can do this by going to a new url in the address bar on Opera Mobile. You cannot open other websites in tabs on your phone, to debug another site, you must use the same tab, just change the url.
(edit: Yes you can! see comments below)

If I go to another website, its html will automatically show up in Dragonfly, after the page has loaded, ready for you to mess with!

Stopping debugging & some tips

  1. When you are done debugging websites, you just hit the Cancel remote debug button in Dragonfly.
  2. You can get a javascript console, to inject javascript, read values etc, with the press of a button (see image below)
  3. If you need more space, you can undock Dragonfly to a separate window (see image below)
  4. Here and here you can find more information on Dragonfly and how to use it.

Console and Undocking

comments powered by Disqus