/wp-content/uploads/2013/12/sap_logo_333927.png

Appendix B:  Debugging

Debugging in a Desktop Browser
Debugging on iOS
Debugging on Android

There are multiple ways to debug a mobile web app.  The following describes some of the techniques and when to use them.

Debugging in a Desktop Browser

 

The following section demonstrates how to debug JavaScript code running in Chrome on a desktop/laptop. For some cases, debugging on the device will be necessary when debugging touch events or code that includes JavaScript files from Apache Cordova or Kapsel since these expect to be running on a mobile device or simulator. The following section uses the sample from Appendix A: OData

In Chrome press

Ctrl Shift J

or Tools > Developer Tools which will open up Web Inspector.

image1.PNG

Source files can be opened.

image2.PNG

Breakpoints are set, and the code can be stepped through.

image3.PNG

Areas of the HTML page can be clicked on and their HTML and CSS properties viewed and changed.

image4.PNG

In the console, commands can be entered and code completion is available.

image4b.PNG

The Network tab can also be used to examine the OData URL sent and the values received.

image5.PNG

image6.PNG

Debugging on iOS

 

The following requires a device or simulator running iOS 6 or above and a Mac that has Safari 6 or above.

This technique is useful for debugging an app that includes Apache Cordova and Kapsel plugins. Connect the device to the Mac via a USB cable or start the simulator.

On the device or simulator, under Settings > Safari > Advanced > Web Inspector > On

image7.PNG

On the device or simulator, open a Kapsel app or a web page in the Safari browser

In Safari on the Mac, choose Develop > iPhone Simulator > index.html

image8.PNG

image9.PNG

Note to see the source for products.html as shown above, click on DOM Tree and choose Source Code.

If you need to debug starting from the init method, set a breakpoint in the init method and then in the console enter

window.location.reload()

Note, if the Develop menu is not available, it can be enabled via the Safari preference setting Advanced > Show Develop menu in the menu bar.

Note, if the app becomes non responsive when placing breakpoints in callback functions and the locals and globals section of the debugger is empty, edit Staging\www\cordova.js.

callbackFromNative: function(callbackId, isSuccess, status, args, keepCallback) {

Change to

callbackFromNative: function(callbackId, isSuccess, status, args, keepCallback) {
    setTimeout(function() {
        cordova.callbackFromNative2(callbackId, isSuccess, status, args, keepCallback);
    }, 0);
},
      
callbackFromNative2: function(callbackId, isSuccess, status, args, keepCallback) {

Debugging on Android

New in Android 4.4 is the ability to debug an app running in a webview which is what is used by Apache Cordova to render HTML.  For additional details see Debugging Android WebViews

The following steps illustrate how to perform line by line debugging of the sample presented in the EncryptedStorage section.

In an Android 4.4 device connected via USB (not needed if using an emulator), enable USB debugging under Settings > Developer options > USB debugging

On Google Nexus devices running Android 4.2 or newer, the developer options menu item under settings is hidden.  To enable developer options, go to Settings > About > Click on Build number several times.

If using a Google Nexus device, install the USB driver for the device by following the instructions at OEM USB Drivers.

Start the Kapsel app.

In Chrome (version 30 or higher) on your desktop, enter

chrome://inspect

in the URL.

image13.PNG

image14.PNG

Note, to disable this feature before releasing a production version of the app, the application section of the AndroidManifest.xml file should contain

<application android:debuggable="false"

If you need to debug starting from the init method, set a breakpoint in the init method and then in the console enter

window.location.reload()

If using an Android device or emulator version 4.3 or lower, Web Inspector Remote or weinre may be helpful or possibly jsHybugger. Weinre does not provide line by line debugging but does provide the console window and allows the page to be inspected.

Install weinre

npm -g install weinre

Start the debug server

weinre --boundHost -all-

Add an include in the index.html of the Kapsel app being debugged.

<script src="http://10.7.171.113:8080/target/target-script-min.js"></script>

Open the weinre client

image10.PNG

Note that the HTML and CSS can be inspected and modified, JavaScript methods can be invoked and global JavaScript variables examined.

image11.PNG

image12.PNG

Marvin Hoffmann has an article named Debugging and Developing Android application in enterprise environments that shows some useful tips when debugging an Android app.  Specifically he demontrates how to connect a device to your computer and use its network connection with Chrome Port Forwarding as well as how to trace the communications between an device or simulator and Membrane Monitor.

Back to Getting Started With Kapsel

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply