Great tool for debugging UI5

Hi,

Some of you might have tried to extend a standard fiori app. It is quite tedious to figure out which view and control to enhance sometimes. The way I did it was to use the chrome web debugger and inspect the source and find the correct control. This way it knew what to change in the view I needed to replace.

This might not be new for some of you, but it was for me. So I thought I might as well share it with all of you, just in case. SAP has released a new tool for chrome to easier debug a UI5 application. It let’s you inspect the SAPUI5 controls in a given app.

The tools adds a new tab to the debugger specifically designed for UI5 applications. You can use this to highlight the controls viewed on the page, when you hover over a control.

Also you can change the controls directly in the debugger without having to rerender the code.

One last great this is that you can also see the bindings of the control directly in the debugger.

Go check out this new tool here and download it in the Chrome web store

I was pretty excited to see this. How about you?

3 Comments

You must be Logged on to comment or reply to a post.

Ashok Babu Kumili November 9, 2015 at 8:13 am

Hi Jakob,

Thanks for sharing your observations they are Intelligent and useful during the development stage.

like (0)
Kripa Rangachari November 14, 2015 at 9:45 am

Hi Jakob,

Iam a new-bie to this!! And definitely this tip would help me in near future!

Cheers,

Kripa Rangachari.

like (0)
Amit Srivastava March 3, 2016 at 6:31 pm

Hi Jakob,

I have added the UI5 Inspector plugin but when i am opening debugger session (F12) post running fiori application, i am getting below screen. Any idea what could be the reason?

There is no OpenUI5/SAPUI5 found on this page

Thanks

Amit Srivastava

like (0)