featured-weinre

How to easily debug websites on mobile devices with “Weinre”

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.

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.

  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.