Using WEINRE to debug mobile javascript with IBM Worklight

WEINRE is an opensource tool designed to debug mobile javascript.  It presents an interface similar to Web Instpector and Firebug.  It lets you view console.log messages, change the DOM, etc.  It is amazingly simple to use.

I recently started using IBM Worklight to build mobile apps.  I was curious if I could use WEINRE with IBM Worklight.  I ran a little test using the Hello Worklight tutorial.  I confirmed they both work together.

Here is what I did...

Prereqs

I first set up IBM Worklight on my laptop, created the HelloWorklight project following the tutorials, and installed the resulting APK on my android phone.


Instrument the source code

I added a line of code to the head section of HelloWorklight.html.  It points to the WEINRE debug server which I will start on my laptop.  This single line of code does the magic of connecting to the WEINRE debug server.

    <script src="http://192.168.1.6:8888/target/target-script-min.js#anonymous"></script>

I specified an explicit IP address, since my laptop has several IPs in use.  I specified port 8888 since the default WEINRE port 8080 was in use by my Worklight server.    You should choose IPs and ports which work for you.

Later on in my test, I also added a button to the body section of HelloWorklight.html

<button onclick="myLittleMethod()">Click me</button>

And added the little method to the head section which gets executed when the button is pressed.   This code pops up an alert on the android screen, and then generates a console.log message which is readable at the WEINRE debug server.

    <script type="text/javascript">
function myLittleMethod()  {
alert("Hello Worklight");
console.log("Hello WEINRE too");
}
</script>


Start the WEINRE debug server

I started the WEINRE debug server from a command-line prompt on my laptop.  I left this server running in the command-prompt.  Be sure to specify the same IP and port you put in the javascript.

    java -jar weinre.jar --boundHost 192.168.1.6 --httpPort 8888

WEINRE gave several messages which looked successful.

    2012-06-15 15:07:40.021:INFO::jetty-7.x.y-SNAPSHOT
    2012-06-15 15:07:40.065:INFO::Started SelectChannelConnector@192.168.1.6:8888
    2012-06-15 15:07:40.065:INFO:weinre:HTTP server started at http://192.168.1.6:8888


Browse to the WEINRE debug server

I aimed my Chrome browser at the WEINRE debug server, using the anonymous account which I specified in the javascript, and the same IP and port as when I started the WEINRE debug server.
 
    http://192.168.1.6:8888/client/#anonymous

Start the mobile app

On my android phone, I started the HelloWorklight app.

Within a few seconds, the mobile javascript connected to the WEINRE debug server.  It appeared as these two green lines:

Test changing the DOM

To show that WEINRE could change the DOM, I changed the background color by typing into the bottom of the WEINRE browser screen:

The background color of HelloWorklight immediately changed:

I changed the color again:

and the background color changed back.

Test console.log messages

After I got this working, I added code to present a button and to generate an alert and console.log messages.

I pressed the button on the HelloWorklight mobile app.  It popped up the expected alert.

As soon as I cleared the alert, the javascript generated a console log message which appeared on the WEINER browser screen.

Conclusion

Based on this little test, I conclude I can use WEINRE to debug mobile javascript, just as I did in the past.   Yay.


References

WEINRE home (and binaries):  http://people.apache.org/~pmuellr/weinre/ 

WEINRE docs:  http://people.apache.org/~pmuellr/weinre/docs/latest/

IBM Worklight:  https://www.ibm.com/developerworks/mobile/worklight.html