Skip to Content

How To Debug SAP Fiori Client App In iOS Devices

In the usual developmental cycle, companies usually have their programmers work on web apps before moving onto a mobile-based platform. It’s a lot simpler to debug a web application than it is to debug a mobile application partially because of the difficulty in debugging tools available to the developer. Luckily, Apple has managed to make life easy for us devs by allowing us to do debugging on iOS devices from a Safari browser and it’s this method of debugging that we will look at today. Fiori Client apps are how we develop Fiori apps for mobile but the Fiori Client architecture is unique in how it runs. The Fiori Client is a Cordova-based hybrid app, which means that it’s built partially off of Cordova, which allows for the adaption of code to multiple platforms. Generating a *.IPA file (or an equivalent *.apk file for Android platforms) is a simple process. Browser-based testing for the purpose of ensuring the app is working on a connected physical device can allow for a lot more insight than a mobile can offer a developer in and of itself, short of including debug code that needs to be cleaned up after debugging has completed. Let’s see how we can use a browser to debug a Fiori Client app on iOS, through the Safari browser.

STEP 1 – Launching the Application

Tap the correct application icon and load it up. Login to the system with the correct username and password in order to connect the app to the Fiori system.

STEP 2 – Connect the iPhone to a desktop or laptop running the Safari browser.

We can check the connected devices on Safari by using the Develop menu. The device should be visible in the main menu selections there labeled with the device’s name. If the device isn’t showing up, then we may have to enable developer mode on the device itself. This is a straightforward operation on iOS 10. We’ve already connected our device previously to our laptop or desktop, so all we need to do is open the iPhone settings application on the mobile device itself. There should be an option labeled Developer that you can activate to allow the mobile device to enter developer mode. If we can’t find the Develop menu option on our Safari install, we may need to activate that as well. This option can be found under the Advanced tab in the Safari settings. there should be a checkbox labeled “Show Develop menu in menu bar“. Once we’ve gotten all those kinks worked out, we’re ready to forge forward.

STEP 3 – Opening the Web Inspector Tools

Under the Develop menu, if we move to the mobile device name, we have the option to open the Web Inspector to get a feel for the connected device’s running apps. That’s exactly what we want to use to get a true approximation for what’s going on under the hood for our app. Once we select the app in question, the Web Inspector will populate fields showing the device’s name, application’s name and the URL that is undergoing inspection. This is as easy as using WordAgent. We will refresh the app and that should allow Web Inspector to make note of all the calls being made by that particular app.

STEP 4 – Loading the App under Normal Circumstances

In order to see what could possible go wrong, we’ll have to simulate the app’s behavior under normal circumstances. For this, we simply load the app again. Web inspector allows us to view the existing custom JavaScript files that exist in the resources tab along the top of the window. We can further filter these files to narrow down the ones to the names of the files we’re interested in. We can attach a custom break point to our file then hit the reload button to reload the app and take note of how the app behaves.

Advanced Analysis and Debugging Tools

Safari offers a unique insight to app developers allowing them to take a look at how their code interacts with the internet through the Web Inspector. This can aid us in figuring out exactly where our custom JavaScript code may be misbehaving and allow us to debug without including massive amounts of extraneous code under the hood. This, in turn, allows programmers to make code more efficient and less heavily typed. The result is faster development and prototyping and a much easier method of dealing with possible app-breaking scenarios quickly and efficiently.

1 Comment
You must be Logged on to comment or reply to a post.
  • Hi Paul Russell,

    I've followed to step 3 and got stuck there.

    The running apps do not show in the connected device menu.

    I'm running Fiori Client 1.12.7 in iPhone 6 with latest iOS.

    Can you please post some screenshots?