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. 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
Advanced Analysis and Debugging Tools