WEINRE is a Node.js application and is published as an NPM package. We've already talked about using Node.js and NPM to run a small server for editing features in Chapter 8, Interacting with Your Map. To install WEINRE then, all we need to do is open a command prompt and run the following command:

npm install –g weinre

This is how the command prompt would look when we run the preceding command. This command instructs NPM to install the WEINRE package globally, which will make the weinre command available to you.

To start WEINRE, we need to use the IP address of the development machine—see the beginning of this chapter if you don't remember it. Open a command prompt and run the following command:

weinre –boundHost <your ip address>

This is how the command prompt would look when we run the preceding command. The boundHost option allows the debug target's JavaScript to be loaded in a page on another machine, such as our mobile device. There are several other command-line options that you can supply to the weinre command; for the most part, you don't need them, but you can read about them in the WEINRE documentation at http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html.

WEINRE starts a debug server and reports the URL at which the debug server page can be accessed. Copy this URL and open it in a web browser. The following is how the page will look when these actions have been performed:

This page has the information and links we need to get started with debugging our mobile web application. The first section, Access Points, contains links to the debug client user interface and documentation. The second section, Target Demos, gives you some quick links to try out WEINRE debugging right away. Try them if you like. The third section contains the link to the JavaScript we will need to add to our mobile web page to activate the debug target code. Let's go ahead with this now.

Open the mobile example page in a code editor. Copy the <script> tag from the following example in the target script section, and paste it into the example page just after the <title> tag, as follows:

<title>Mobile Examples</title>
<script src="http://192.168.209.8:8081/target/target-script-min.js#anonymous"></script>

Now, for the big finale—load the mobile example on your mobile device, and then click on the link to open the debug client on your desktop machine. After that, this is how your screen will look:

The Remote tab shows the debug target connected and some other information. You can now click on the Elements, Resources, Network, Timeline, and Console tab. Click on the Elements tab to show the Elements panel. This is how your screen will look after performing these actions:

You can use the Elements panel just like Chrome Developer Tools and explore the DOM. Note that it can take a few moments for WEINRE to respond with information, so be patient and wait for it to appear.

The Resources panel shows WebSQL databases and data stored in the local storage and session storage. The Network panel shows XML HTTP requests issued after the page has loaded. Unlike Chrome Developer Tools, it can't capture the assets loaded by the page itself.

The Timeline panel can be used to display timing information about events and to track user-triggered events. Using this panel is beyond the scope of this book, but if you are interested, then check out the WEINRE documentation.

The last tab, Console, displays the JavaScript log and provides a command line for executing arbitrary JavaScript in your web page. Try typing the following command into the console and hit Enter:

alert('test');

Your screen will look like this when the preceding command has been entered.

You should see an alert pop up on your mobile device, as shown in the following screenshot:

The Console tab also shows log messages, and we can filter by message types (Errors, Warnings, and Logs). Some log messages are generated by the browser itself, typically when an error happens, and we can use WEINRE to see if errors are happening. We can also programmatically send messages to log in our code using methods of the global console object that are available in all web browsers.

WEINRE isn't as complete as native debugging with iOS and Android, but it can certainly help out at a pinch.