How to debug UI code of a Fiori application

Generally speaking, the UI code of a Fiori application return is minimized and obfuscated.

All of the UI code of a Fiori app is put into Component-preload.js. As you can see in the developer tool in the browser (by pressing F12 in the browser).

You might be interested in “Browser Debugging for ABAP Developers“

In order to debug the UI code, we need to trigger the debug mode.

Press Ctrl + Alt + Shift + s

Obviously after open this option, the loading of the app is very slow.

So please DO remember to turn off this option if the debug is finished.

Please refer to SAPUI5 “Diagnostics Window“.

Now you can debug the code.

SAPUI5 Walkthrough

SAPUI5 Support Tools

Browser Debugging for ABAP Developers

Fiori Application Technical Overview 2

How to debug the Fiori Back-End ABAP codes