- SAP Managed Tags:
Previous Home Next
Debugging in a Desktop Browser
Debugging on iOS
Debugging on Android
Debugging on Windows
There are multiple ways to debug a mobile web app. The following describes some of the techniques and when to use them.
If you are using SAPUI5 the Troubleshooting SAPUI5 Apps may be helpful.
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
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.
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
or call
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.
Release versions of the apps are not debuggable. For example, it is not possible to connect to the Fiori Client downloaded from the App Store with the Web Inspector.
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
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
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
or call
Screencast 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.
Debugging on Windows or Windows Phone requires Visual Studio.
Notice that the index.html from MSAppHost can be selected in the Solution Explorer and breakpoints can be set.
Also notice above that in the JavaScript console, values of variables can be seen. Press Cntrl + Enter to execute a JavaScript line.
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.
Previous Home Next
Debugging in a Desktop Browser
Debugging on iOS
Debugging on Android
Debugging on Windows
There are multiple ways to debug a mobile web app. The following describes some of the techniques and when to use them.
If you are using SAPUI5 the Troubleshooting SAPUI5 Apps may be helpful.
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 Jor 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.
Release versions of the apps are not debuggable. For example, it is not possible 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://inspectin 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');
Screencast 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.
Debugging on Windows
Debugging on Windows or Windows Phone requires Visual Studio.
Notice that the index.html from MSAppHost can be selected in the Solution Explorer and breakpoints can be set.
Also notice above that in the JavaScript console, values of variables can be seen. Press Cntrl + Enter to execute a JavaScript line.
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.
Previous Home Next
