If you haven’t checked out Weinre, you really ought to!

Weinre is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it’s designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.

While not as good as a full remote web inspector (like the one found on the PlayBook), its a great tool to help debug with mobile development. Weinre is part of the PhoneGap project and there is a publicly hosted version run as a service that can be found at debug.phonegap.com. Unfortunately the hosted service appears to be having a few problems & I’ve struggled to get local clients to connect, the good news is that Weinre can be installed and run locally.

Weinre was originally written in Java but has recently been ported to Node.js, these instructions will be for installing the Node version.

Install Homebrew

Homebrew is a package manager for the Mac and is what we’ll use to install Node. Full installation instructions can be found here (including the contents of the following script) but to jump right in run the following in Terminal:

/usr/bin/ruby -e "$(/usr/bin/curl -fsSL https://raw.github.com/mxcl/homebrew/master/Library/Contributions/install_homebrew.rb)"

Note: You’ll need XCode installed to be able to get Homebrew working

Install Node.js

Now Homebrew is installed you should be able to get Node by running:

brew install node

Install NPM

NPM is a package manager for Node.js and makes it easier to install/update/remove discrete Node modules. To install run:

git clone http://github.com/isaacs/npm.git
cd npm
sudo make install

Install Weinre

You should now have everything ready to be able to install Weinre, to do so run:

sudo npm -g install weinre

Running Weinre

Now Weinre is installed you can make a start using it locally. First you need to run the server:

weinre

You should now be able to connect to http://localhost:8080 from your desktop web browser. The page displayed will give instructions on usage.

Working with Real Devices

I recently wrote about my setup for testing web apps/sites on real mobile devices. If you’re also using this kind of a setup then you likely want to be able to run Weinre on something other than localhost. This is easily done by providing an additional startup flag. To use the fictional mywebapp.mobiledev.com domain used in aforementioned blog post, you’d simply run:

weinre --boundHost=mywebapp.mobiledev.com

You would then need to point your browser to http://mywebapp.mobiledev.com:8080.