WEb INspector REmote
Weinre, a WEb INspector REmote tool for webkit browsers. It has been included in some tools such as the Adobe Shadow application, though this requires the device to have the application and the computer to have the app….and the browser to have the plugin.
Weinre is a more difficult set up, but once down, allows for a more immediate benefit. If you were only looking to use the inspector tool of an Adobe Shadow type application, then using basic weinre is probably best for you.
Firstly, here is the page where you will lots of information, guides, links, support etc. Check it out and have a read to get the most out of weinre
http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html
Installation
Weinre can be installed anywhere, so just create a folder in your preferred location. I should say that these instruction are for OSX, Windows users should refer to the manual.
1. You first need to install node.js here http://nodejs.org/#download
2. Next you should install npm (package manager)
sudo curl http://npmjs.org/install.sh | sudo clean=yes sh
You dont have to run this full command, it just makes it easier in case you have conflicted installs or permissions.
3. Once you have that, create a folder to store wierne and cd to it, then run the following command in terminal
npm install weinre
4. You can now start the server with the following command. The main thing here is to ensure you have the right path. My folder is on my desktop so the command is
node node_modules/weinre/weinre
5. This is now running at localhost:8080, so you can have a look now, but we havent got anything going, so we can add an IP address to allow devices to access the server. We can run the following command
node node_modules/weinre/weinre --boundHost 192.168.1.78 -all-
It really depends on how you are going to work. I will talk about how this can benefit your team later
6. You may have decided not to do step 5, so you want to make weinre work, adding the following to your page will allow you to inspect.
script src="http://192.168.1.78:8080/target/target-script-min.js#anonymous">
Put it into the body and then save the file.
7. You can now browser to your page and the inspector should be working. Just visit either your local host or IP forwarded address, (localhost:8080) and click debug client user interface link. This is compatible with Android browser, Chrome, iOS Safari, webOS, Dolphin, Blackberries and more.
Summary
The benefits are that you dont need to rely on applications or support for this tool to work. It allows you simple access to debug web pages on any web kit browser. Apart from Opera and Windows Phone, it nearly gives you full coverage over smart phones. I would say the biggest benefit here is support for other browsers based on webkit but not native, which Adobe shadow uses. The next big plus is that OS’s like Blackberry and QNX, webkit browsers, are also supported. So the potential for checking browsers and editing the page on the device is great. Although you could use Ripple, a Blackberry emulator tool, to inspect browsers, there is nothing like the live experience on a device.
If you are the kind of person who wants to share your work and have other people look at it, check it, change it, you can use the IP address technique i mentioned in the guide to allow them to do this. If you use this method, the debug tools will be accessible from any computer on your local network, meaning only 1 computer needs to run the services. http://192.168.1.78:8080/ If this was an IP address of the server, type this into Chrome and you will be shown the control panel of the weinre, then clicking on the client user interface will bring up the Chrome tools. If you are working with branches and someone notices a bug, being able to fix it right there and then on any webkit device could help you speed up release.
While im sure many of you have used this tool in the past, or have heard of it, i think this is a better way to work than use Adobe shadow for inspecting. Shadow will speed up time looking at pages for sure, but it needs total device support to make it a really powerful tool, as it stands, using the normal weinre is the best way to go.
