What you need:

• a mobile phone running Opera Mobile 9.7 or higher
• a desktop computer running Opera Desktop 9.5 or higher
• WiFi must be enabled on the mobile phone
• the IP of the desktop computer must be reachable from the mobile phone

If you can meet the requisites mentioned above, you are ready to go. On your desktop computer, launch Opera and select “Tools > Advanced > Opera Dragonfly”. This will Show the Dragonfly UI at the bottom of the Opera window. Klick on “Settings” to open up Dragonfly’s settings dialog. Scroll down until you see an entry called “Remote debugging”. Enable the setting by ticking the box and set the port number you want to use.

Note: the menu entries and the locations of the UI elements might be different on your system. The UI and the menu navigation is slightly different across versions and platforms.

Keep Opera running, it is now waiting for connection from remote debuggers on the port you specified.

Next, launch Opera Mobile on your phone and enter “opera:debug” in the URL box. Enter the IP address of your desktop computer and the port you configured Opera desktop to wait for connections on, and click “connect”.

If all went well, you should see a message below the connect button in Opera Mobile saying that it is connected to the IP and port you set.

In order to actually remotely debug a page, you have to open a new tab in Opera Mobile and direct the browser to the page. Then, in Dragonfly on the desktop, you have to click on the dragonfly logo to select the tab to debug.

Again, if all went well so far you should be able to use the full potential of Opera Dragonfly for debugging mobile HTML pages and WebApps on a real device, from your desktop computer.

Of curse, this works with Opera only, so stay tuned for further posts in which I will talk about other platforms and the options available there.