Posts tagged Dragonfly
Debugging websites on mobile devices with Opera Mobile and Dragonfly
Aug 24th
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!
How to easily debug websites on mobile devices with “Weinre”
Aug 5th
If you do web development, chances are you sometimes need to fix something on the website adapted to mobile devices such as iPhone and Android.
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.