Skip to main content
SAP Fiori

Dev Tip: Debugging Minified Fiori Apps

N Naveen
2 min read
To sign up and get your dev tips delivered to your inbox each week, click here!

Tip of the Week

Debugging Minified Fiori Apps
Minification in JavaScript

Minification is a programming practice in interpreted languages like JavaScript. The advantage is it reduces the amount of data that is transferred between the Server and the Client.

Many standard Fiori Applications are deployed in Minified Version. A quick way to check if a Fiori application is using Minified version is to look for the Component-preload.js file in the Sources Window of Developer tools.
The Component-preload.js file contains all the views, controllers, CSS, models, utilities of the Fiori Application and instead of using multiple HTTP calls to load the App, it uses a single HTTP call. In the screenshot below you can see the Component-preload.js file for a demo application.
Developers Challenge

Most often developers would have to debug the minified Fiori Applications. The SAP Fiori Diagnostic tools provide an easy way to convert a project from minified version to a regular Fiori App.

Your shortcuts to memorize:Windows: Ctrl + Alt + Shift + s

Mac:  Ctrl+ Opt + Shift + s

Using the above keyboard shortcuts one could launch the SAPUI5 Diagnostics tools. Use the toggle button in ‘Debug Sources’ to activate debugging and load the non-minified version of Fiori Project.

Project structure with Debug Sources: OFF
As one could observe, the application only shows the component-preload.js file and loads all other resources in a single HTTP call
Project structure with Debug Sources: ON

As one could observe, the application now loads each controller, css, view, model artifacts individually and showcases the folder structure of the project.

Diagnostics Tools with Debug Sources:  ON ​
Enjoy Debugging!

 

If you have an interest in viewing similar content, visit our blog, here. 

View our LinkedIn, here. 

Energy & Utilities SAP Fiori SAPUI5 Web Development
N

Naveen

Naveen R., Principal Architect. For more information on Celonis at Mindset, please reach out to info@Mindsetconsulting.com

More from Naveen

Related posts