Skip to main content

Debug SAP Fiori App

Sachin Patil
Sachin Patil
SAP

Debugging is an integral part of application development and helps to find / fix any defects that might prevent an application from operating correctly or also help to conclude on the approach for the customer specific customization / enhancement.

SAPUI5 apps runs on client / browser side. So, we use JavaScript debugger by pressing F12 (Browser). On the other hand, if you are consuming Gateway (OData) services / ABAP RFCs you could set an external breakpoint in order to debug your backend code.

Scenario

Identify the OData service used for SAP Fiori App F4494 and set debugger in SAP ABAP for "Reverse" activcity of same app.

F4494 - Reverse Document

FIori App​

Navigate to Fiori App and select the document.

alt text

Activity​

Click on Reverse button

alt text

Identify Service​

Press F12 and click on reverse button on popup. You will find the service details under "Network" as below. For this case it is - O2C_FICA_DOC_REVERSE_SERV.

For standard apps, you can find the services here also, https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/#/detail/Apps('F4494')/S28OP

alt text

OData Service Catalog​

Next, go to Transaction Code /IWFND/MAINT_SERVICE and search for the ODATA service. Click on Find iocn and provide the service name identified in previous step.

Double clik on the service and then under ICF Nodes, select SAP Gateway Client button.

alt text

Service Implementation Details​

Click Service Implementation button this will display the service technical details.

alt text

Service Information​

Double click on the Data Provider Class to navigate to class builder. Here it is CL_O2C_FICA_DOC_REVERS_DPC_EXT

alt text

Service Objects List​

CLick on "Display Object List" Button

alt text

Redefinitions​

Under CL_O2C_FICA_DOC_REVERS_DPC_EXT, select "Methods" and then "Redefinitions" as below.

Here, we can see the backend logic and the activities triggered behind the "Reverese" button.

You can put the external breakpoint here and when next time you will triggeer the call from fiori app, it will start the debugger session.

alt text

Note: This is one of the way to achieve this, 
there are other ways as well to do the same.