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 + I or by clicking the main menu -> Page- Developer tools -> Dragonfly

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.

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)

Stopping debugging & some tips

Console and Undocking

Debugging websites in a browser on a computer is easy with all the good tools available, such as Firebug in Firefox, Webkit inspector in Chrome and  Dragonfly in Opera. But mobile devices doesn’t have any such tool. What do you do then?

That was my problem the other day, a div  element on the website rendered for iPhone got the wrong styles, so I had to investigate…

Which was not easily done from the iPhone Safari browser, to say atleast.

(And the solution was not as easy as just browsing the mobile website on my computer with iOS user agent.)

A buddy of mine had just recently come over a tool called weinre. Funny name, yes, but a very handy tool to debug websites on mobile devices!

About Weinre

• Weinre stands for “Web Inspector Remote” and is similar to the web inspector in chrome.
• It will allow you to use the inspector (run on your computer), on the website rendered on your mobile device!
• Changes you do in the inspector, are reflected instantly in the mobile devices browser. (such as changing text, color, dimension etc) just as in FireBug.
• You also get a javascript command line.
• Weinre is a simple jar file, you run through the command line.

It has a lot of documentation on its website, maybe too much, so I thought I would try to cook it down to a few simple steps to get up and running quickly.

How to run weinre

1. Start with downloading weinre here.
2. Find your local ip adress by opening a command prompt, and enter ipconfig.
3. Then enter java -jar weinre.jar -httpPort 8081 -boundHost -all- in the command prompt to start weinre
   

   weinre running

4. With Chrome browser, openhttp://127.0.0.1:8081/which will take you to weinres interface, which looks like this:
   

   Weinres webinterface

5. And then open http://127.0.0.1:8081/client/ in another tabs. This is where you will do the website inspection, once the mobile device is connected.
6. On your mobile device, on the same network (wifi on), enter your computers local ip followed by port 8081 in the url.
   Something like this: 192.168.0.105:8081
7. You should then see the weinre website on your mobile device, like pictured above.
8. Scroll down on your device, and copy the bookmarklet text:

   javascript:(function(e){e.setAttribute("src","http://192.168.1.105:8081/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);
   

   Where 192.168.1.105 automatically points to the local ip of your computer, so don’t worry

9. The goal is to create a bookmark with this code. On iPhone, create a new bookmark, save it, then go and edit it. Then you can paste in the javascript code above as the bookmarks adress. A little bit complex, but it works.
10. Go to the website you want to debug, then open the bookmarks, and click our newly created bookmark. this should run the javascript which connects to weinre on your computer.

The game is on, and you should now be able to edit the website with the webinspector, that is the last tab we opened in chrome: http://127.0.0.1:8081/client/ just hit the big green “Elements” button on top.

Press the "Elements" button

That button will open the inspector for you to toy around in. If you look closer at this image, you can see me editing the article header of this website, which is loaded on the mobile device.

Any changes you do in the inspector will reflect on the mobile device (here, iPhone 3GS), just like Firebug works for firefox:

Before editing the article header. (The gray box around the header is automatically applied when you hover an item in the web inspector.)

After editing the header

This ingenius tool helped me debug a website I was working on, so I wanted to share it with everyone

Please share this article.