How to use Chrome Dev Toolkit for UI5 development

Technology Blogs by Members

Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!

The chrome dev toolkit is a very simple to use and it can be used to debug , learn , explore and experiment with your UI5 code.

In this article will talk about following tabs of chrome console, few of the discussion are very obvious but it was not that obvious for me when i started using it:

Elements.
Network .
Source
Profiles.

To open Console press Fn + F12 / Ctl + shift + c

Elements:

This part of console will let you know about what is the HTML the browser is rendering :

You can use this to navigate to specific element in html and see its HTML rendered content :

The other best use of it to change the CSS and see the change reflected on the fly in your page , you can also play with some of the standard CSS elements of UI5 and change its property and see what are the changes occurs in the web Page , but be aware that there are many places where the CSS properties are used so , changing them here would also change the content everywhere the class is used.

Network:

This is very important tab if you are having AJAX GET and POST request with your application you can use this tab to see the header status , response(content you get) and timing(to see the sequence of the operations):

Source:

(Console and emulation)

This is one of the most used tab by me in the development , you can pretty much see all the files which are used in the UI5 Application in the File browser:

The one more exciting this you can also do some development in the JS file and it is just like a smart Editor :

and if you did some changes and save it then sometimes you no need to refresh the application to check how the changes are , when the changes are some actions where the control is to be passed then the new changes will be executed :smile:

The console of the toolkit is one of the sweetest , it is a playground sometime to tryout entire logic to see it it will work and then do the development :

example if you want to have a new panel and add it to old then:

the most cool thing about the panel if you do not know what are the methods you can use for oldPanel then you can get it's object and you will get list of the possible operations and functions:

you can also see the definition of a function if you will only mention its name without calling it i.e without '()' appended at its end.

And if you want to explore the objects of then just open it in the console and go as much level down as your curiosity will take you it is amazing way to explore the inheritance of UI5 as well:

Emulation tab in will help you to see how your application will look like in the specific device:

Profiles

The first thing in the Profile is you can see CPU Profiles for JavaScript function run time and idle duration in tree manner and also get % , sometimes if there is an operation we are worried about is having the performance glitch and we can not find it in network part of the kit then this will probably give some clues.

The other very cool thing you can do here is see heap snapshot , the two most important thing in a execution is heap and stack the stack stores the program execution and heap is storing the dynamic memory allocation of runtime .

When you are dealing with huge size of data or huge number of data in an analytic appliaiton then it is pretty handy one.