Debugging Cordova with Weinre

As of Blackberry OS7, you can debug and modify WebWorks/Cordova apps in real-time with Web Inspector (see microsite). If you are familiar with using Web Inspector for web projects on Chrome or Safari, you can also use it for Android by way of Weinre. This will be a quick tutorial showing you how to get up and running with Weinre on Android.

  1. First of all, you’ll need node.js if you don’t already have it
  2. With node.js installed you can install weinre using the following commands.
    [PC command-line] npm -g install weinre
  3. Next, find the ip address of the machine that will run weinre using ipconfig/ifconfig
  4. Still at the command line? Good. Enter
    weinre --boundHost YOUR_IP_ADDRESS and you should get something like this back
    weinre: starting server at http://192.168.1.2:8080. There are other configurable options detailed here.
  5. Open up your browser at the address your server is running at, for me it would be http://192.168.1.2:8080. This should present you with a Weinre page with sections called “Access Points”, “Target Script” and so on
  6. Next we are going to add the “target script” url to our Cordova project, if you don’t have a project handy, you could use my Embedded Cordova WebView from the last tutoral – github link – this is what I’ll use for this tutorial
  7. In this example, I have added the target script below the style.css import in assets/www/index.html of the project:
  8. 		<link rel="stylesheet" href="styles/style.css" />
    		<!-- This is the Weinre script -->
    		<script src="http://192.168.1.2:8080/target/target-script-min.js#anonymous"></script> 
  9. In your pc browser, go to the ‘debug client user interface’ address under the “Access Point” section of the Weinre page – it should be something like http://YOUR_IP_ADDRESS:8080/client/#anonymous if you are using the default port. Once you have made sure your mobile device’s Wi-fi is on and you are connected to the same subnet as the PC running the server, you can compile and run the app. If all goes well, you should see the following in your browser when you start the Cordova Activity

weinre
When you hover over different sections of the DOM in Web Inspector, such as the button containing the text “Get some device info using Cordova”, you will see the area become highlighted in the app.
highlight
If you are not familiar with Web Inspector, you can make changes to your app from your PC browser, such as altering text…
altered_text
..or change some of the CSS rules. However, not everything worked perfectly for me, when I changed the background-color of the buttons and changed it back, they lost their border – I needed to reload the page to get them back.
not_perfect
These minor issues aside, this is a great way of adding the power of ‘desktop’ Web Inspector to a mobile app/website, so you can make small changes and see the results without re-compiling your app with each iteration/change.