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.
- First of all, you’ll need node.js if you don’t already have it
- With node.js installed you can install weinre using the following commands.
npm -g install weinre
- Next, find the ip address of the machine that will run weinre using
- Still at the command line? Good. Enter
weinre --boundHost YOUR_IP_ADDRESSand you should get something like this back
weinre: starting server at http://192.168.1.2:8080. There are other configurable options detailed here.
- 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
- 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
- In this example, I have added the target script below the
style.cssimport in assets/www/index.html of the project:
- 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/#anonymousif 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
<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>
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.
If you are not familiar with Web Inspector, you can make changes to your app from your PC browser, such as altering 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.
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.