Weinre (WEb INspector REmote) is a debugger for webpages that is designed to work remotely. This is especially helpful for debugging web pages that are running on mobile devices.

We are going to need several things to get weinre up and running. First we are going to install node.js, which will host the weinre webserver; next, we will install the node package manager (npm); then, finally we will install weinre.

Getting node.js

The easiest way to get node.js is to go to nodejs.org and download the windows installer (This has the added benefit of automatically installing npm. However, I preferred to skip the installer and get just the latest executable from the download site here: node.exe.

Installation

Getting npm

If you used the installer to get node.js, npm is already in node.js’s installation directory. Otherwise, head over to http://npmjs.org/dist/ and grab the most recent version (npm-1.1.44.zip) at time of writing. After downloading the file, unzip it to the same directory that contains the node.js executable.

Getting weinre

Next, open a command prompt and navigate to the directory that holds the node and npm executables. At this point, you have two options, you can use the weinre binary thats deployed on npmjs.org by issuing:

npm install weinre

Or you can provide a full url. Since, at time of writing, there are no official builds for weinre on the Apache mirrors, I would recommend just using the npmjs binaries as their location will not change as the transition to the incubator project continues. If you do want to specify a full url for installing weinre, you can get the up-to-date binary package locations from here.

Running

Now that weinre is installed, you can run it by opening a command window to your node.js executable directory and running:

node.exe node_modules\weinre\weinre --boundHost -all-

This will start a new weinre instance at http://localhost:8080, and it will listen on all your computers interfaces, which will allow remote clients (the mobile device) to connect to the server.

If a Windows firewall dialog pops up, you should grant access to node.js. Once weinre starts up, it should display a message such as:

2012-07-20T00:39:40.998Z weinre: starting server at http://localhost:8080

In the console.

Enabling weinre on the mobile device

After weinre starts, navigate to http://localhost:8080 in a WebKit-based browser (Such as Google Chrome). You will be presented with a dashboard showing access points and target scripts.

One gotcha is if you go to http://localhost:8080, the target script is going to display a localhost IP for the script file. This won’t work if we are debugging on a mobile device – we need to use the IP of the computer’s interface that connects it to the network. This can be determined by running the ipconfig command in a console.

For example:

C:\Users\Dustin>ipconfig
------------
Windows IP Configuration


Ethernet adapter Local Area Connection 2:

   Media State . . . . . . . . . . . : Media disconnected
   Connection-specific DNS Suffix  . :

Ethernet adapter Local Area Connection:

   Connection-specific DNS Suffix  . :
   IPv4 Address. . . . . . . . . . . : 192.168.1.24
   Subnet Mask . . . . . . . . . . . : 255.255.255.0
   Default Gateway . . . . . . . . . : 192.168.1.1

By navigating to my IPv4 address (http://192.168.1.24:8080), I can be sure that the mobile devices on my network will be able to access the weinre server.

To enable the mobile device to connect to the weinre server, you must add the target script to the code of the webpage. I’m developing using PhoneGap, so I simply pasted the target script into the header of my index.html file, and rebuilt my application.

Debugging with weinre

After building and deploying the updated app to my device, I simply run it on the device, and navigate to the client access point (eg: http://192.168.1.24:8080/client/#anonymous). Notice the url fragment anonymous. This must match on both the target script and on the client access point, as it provides a way to have multiple debug sessions, and to keep others from discovering your debug sessions if they are on the same network. More information can be found on the MultiUser page of the weinre site.

Debugging in Blackberry Webworks

Webworks doesn’t like the local weinre server – it’s expecting a publicly routable address. You can either open the appropriate ports on your router to let external devices access your winre instance, or you can use the public phonegap instance at debug.phonegap.com.