Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Dan_vL
Product and Topic Expert
Product and Topic Expert
0 Kudos

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.

Source files can be opened.

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

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

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

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

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

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


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()

or call

    cordova.fireDocumentEvent('deviceready');


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, the app may become non responsive when placing breakpoints in callback functions and the locals and globals section of the debugger is empty due to https://issues.apache.org/jira/browse/CB-8468.  To workaround this problem, 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) {

Release versions of the apps are not debuggable.  For example, it is not possile to connect to the Fiori Client downloaded from the App Store with the Web Inspector.

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. 

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

android:debuggable="false"

  Note this is done automatically when a release build is created.  Right click on the project in Eclipse and choose Android Tools > Export Signed Application Package.  The resultant apk file can be deployed on to a device using adb install name.apk.  This version of the apk when run on a device will not be debuggable with the web inspector.
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()

or call

cordova.fireDocumentEvent('deviceready');


Another feature that seems to work better for me using Android 5.x rather than 4.4 is screencast.  It can be enabled by clicking on the icon to the right of the magnifying glass and is shown below.  It enables the entering of text or the interacting with a UI from within Web Inspector.

If using an Android device or emulator version 4.3 or lower there are a few other options available such as Crosswalk which replaces the older WebView with a current one that can be debugged using Web Inspector.
Web Inspector Remote or weinre may be helpful or possibly jsHybugger.

Marvin Hoffmann has an article named marvin.hoffmann/blog that shows some useful tips when debugging an Android app.  Specifically he demonstrates 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.
Note that tips section demonstrates a few other tools such as Fiddler that can be used to trace communications between the device and the SMP server and the SMP server and endpoints.

Back to Getting Started With Kapsel