Six ways to debug a hybrid Worklight application
Christian Karasiewicz 270005XS4E Visits (11307)
This blog post is contributed by Nathan Hazout, a developer for the web and for mobile who does customer oriented R&D for IBM Worklight.
Choosing to develop your mobile application using web technologies allows you to quickly deliver a multiplatform application without investing too much time and resources in learning to develop for each platform. However, you lose some of the built-in debugging features that each of the native integrated development environments (IDE) provide.
To work around this drawback, here are some tips that can help you find out why that cool button you added doesn’t do what it was supposed to do.
1. Preview as common resources
In your Worklight Console, click on “Preview as Common Resources.”
You will now be able to debug your application just like any other website. Depending on your browser, there are several tools available.
If you use Chrome, you have access to the Chrome DevTools, which allows you to do things such as
2. Mobile browser simulator
When previewing as common resources is not enough, IBM Worklight provides the mobile browser simulator.
You can access it from the Worklight Console by clicking on the “eye” icon.
The mobile browser simulator has added value over “Preview as Common Resources.” For example, it enables you to:
You can still use your browser inspector while using the mobile browser simulator.
3. iOS Safari remote debugging
If you have access to a Mac with Safari (6 and higher) and Xcode, you can use Safari Web Inspector to remotely debug a hybrid Worklight application running on the iOS emulator or on a real device connected to your computer. Follow these steps:
Note that you can only inspect applications that were transferred to a device using Xcode, and not third-party applications downloaded from the app store.
4. Android Chrome remote debugging
If you have a device (or emulator) running Android KitKat (4.4 or above) and are using Worklight 6.2 or above, there is a way to remote inspect your application, similarly to what we did above with iOS, but with a few extra steps.
You can now use all the features of the Chrome web inspector to inspect your Android application!
Weinre is a free tool (as in “free beer” and as in Apache License) that allows you to connect a browser inspector to your mobile application remotely when the previous solutions are not doable.
A Weinre setup is made of three parts: the “target” (your device, application), the “client” (the web inspector running on your desktop browser) and the “server” (the host making transmitting data between the client and the target). Very often, all three parts will run on the same computer, but you could choose to run them separately.
6. Good old logger
Sometimes, there is no way around the most used way of debugging your application: print logs.
More ways out there
I am sure there are a lot more techniques out there that I haven’t talked about, and I invite you to share your own experience below. For example, do you have any tips to debug Android before KitKat? What about debugging Windows Phone and BlackBerry?