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!
What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.
( 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
Setting it up is really easy. All you need is Node.js and NPM.
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 8080.
Add Javascript File to Your WebPage
Go over to http://localhost:8080 next and find the Javascript file that you need to add to your webpage under the section called Target Script. Add it via script tags (the code is also given under that section).
For me it is something like this –
<script src="http://192.168.1.6:8080/target/target-script-min.js#anonymous"></script>
Debug Time!
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.
Conclusion
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.
The link in your article has moved:
From:
http://debug.phonegap.com/
To:
http://debug.build.phonegap.com/
Jesse