Weinre (WEb INspector REmote) – pronounced as ‘winery’ – is an excellent tool that reuses the code from the webkit web inspector to allow remote webpage debugging (basically what firebug or chrome dev tools does for inspection). It can be extremely useful when you want to debug a webpage in mobiles, tablets or any other remote device!
( image source )
Note: Although you can use any browser in the device on which you want to do the inspection, but on the computer where the inspector is going to be launched, you must use a webkit based browser (chrome, safari) as that’s what the tool has been designed for.
Doing it Yourself
Install via NPM
$ npm install -g weinre
Run the Weinre Server
It is as easy as doing this –
$ weinre 2013-01-31T12:33:11.701Z weinre: starting server at http://localhost:8080
You can also bind it to a particular host –
$ weinre --boundHost=192.168.1.6
Even better use this to bind to all the IP addresses of your machine (including the
localhost hostname) –
$ weinre --boundHost -all-
Just check out
$ weinre --help for more information. By default the
weinre server will run on port
script tags (the code is also given under that section).
For me it is something like this –
Under the first section called Access Points you’ll find a URL similar to this (that lists all the connections to the weinre server) –
http://192.168.1.6:8080/client/#anonymous – click that and watch all your targets there, i.e., any mobile, tablet (or other remote device) that has the webpage opened.
If you have multiple devices (targets) connected then just click the one you want to inspect and the link will turn green in color, so that you know which one you’re debugging.
Some of the features that it supports are:
- Inspect (view, edit, delete) the HTML and CSS of the webpage.
- Inspect localStorage, sessionStorage and WebSQL data.
- Event Timeline.
- Console, where you can run arbitrary JS code (very useful for debugging JS to some extent).
Basically, this entire inspection and debugging works via XHR (ajax) requests. Seems like there are tickets opened that have suggested to make use of websockets, but it hasn’t been implemented yet.
Using PhoneGap’s Hosted Service
For some reason if you’re uncomfortable with running your own server and going through the aforementioned process, then just use phonegap’s debug server that uses weinre at – http://debug.phonegap.com/. Very easy to follow steps, just visit there and you’ll know what to do. Excited ?
Apparently on this environment you can also inspect your cookie and HTML5 AppCache data, while I couldn’t figure them out in the installation on my box.
This is really awesome for webpage debugging and testing. It doesn’t have all the features of chrome dev tools. You can read up on the reasons in the docs.
Personally, I really miss the network activities feature, as its really helpful for networking diagnostics.