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!
- 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.
- 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
Edit: If you want to use weinre, but don’t want to install it on your computer, take a look at the comments section below, for user ‘Jeverd01’s tip.
- Start with downloading weinre here.
- Find your local ip adress by opening a command prompt, and enter ipconfig.
- Then enter
java -jar weinre.jar -httpPort 8081 -boundHost -allin the command prompt to start weinre.
With Chrome browser, openhttp://127.0.0.1:8081/ which will take you to weinres interface, which looks like this:
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.
- 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:
- You should then see the weinre website on your mobile device, like pictured above.
- Scroll down on your device, and copy the bookmarklet text:
Where the ip "192.168.1.xxx" will automatically points to the local ip of 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.
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.