How to debug a standard Fiori Application via Fiori Launchpad

Introduction –

This blog is all about debugging a standard Fiori Application. I have faced this issue myself while checking a standard Fiori App and i am quite sure that many of us have faced the same problem. In order to check, I have to open the app in SAP Web IDE and then look for the code related to the same.

So let’s say there is a requirement where we have to enhance an existing standard Fiori application and add our custom features. Now before doing that we need to know how the standard application is behaving with the existing code.

In order to check that i used to open the application and then check the views, controllers there which is a very tedious task to do.

Solution –

Please Note – This blog will only provide details around how to debug the Front end – UI5 part of a Fiori Application.

Now while checking this, i came to know about the process via which we can debug a standard Fiori Application through Fiori Launchpad only. Let me demonstrate the same in the following –

Now let’s say, we need to debug the following standard Fiori App – My Time Events(Version 2/Fiori 2.0) – App ID – F1506A

Initially when I try to open the developer tools(F12), I can only see the Component-preload.js file. I was not able to find any controller or view for that application.

Now in order to show this controller and view files the following keys need to be pressed together –

Ctrl+Alt+Shift+P    (Please close the developer tools before going with this option)

( I have tried this on Google Chrome, Edge, Internet Explorer and it worked with all of them)

Then it will open a popup dialog box –

Here we have to select the checkbox – Select specific modules and then it will open another popup.

Click OK button.

After that, if we check the URL, we can see there is a parameter called sap-ui-debug=true has been added in the same.

Now, we will be able to check the controllers and views in the developer tools under Sources tab.

A break point has been set in one of the controller file and we can now see that the debugger has been stopped there.

Hurrah! Objective achieved!

Conclusion – The above approach can be used to debug any standard Fiori Application.

I hope you find this blog interesting and helpful. I wrote this blog to share my knowledge with you so if i have missed anything important please feel free to add the same in comment box.

Stay happy and blessed.

Thank You