UI5 Inspector add-on in Chrome

[enric101]

This chrome add-on allows us to verify the different components in SAPUI5 application. It also gives us information about hierarchy of components and binding model.

Installing the plugin:

The easiest way to install it is by visit this URL:

https://chrome.google.com/webstore/detail/ui5-inspector/bebecogbafbighhaildooiibipcnbngo

Once on the page, click on the "Add to Chrome" button and in the Pop-up click on "Add extension" We already have our plugin integrated. Does not require any extra configuration.

First steps

This extension is added in the Chrome development tools. When loading an HTML page, it add the script "detectUI5.js".

(Optional Stept) Change the configuration of the extension to add the script manually everything you want

• Click on the add-on with the right button in the navigation bar of the browser. And we select "By clicking on the extension"

When we need to use the add-on we just have to press the Fenix (ui5 logo).

How to access the extension to inspect a UI5 application

Let's see how easy it is to use this extension. We will access from the development console.

• Press "F12" and then go to the "UI5" tab.

Using the extension

When accessing the tab "UI5" of the development console we can see 2 tabs. One is the "Inspector Control" that allows us to view our UI5 application in XML format. The other tab is "Application information" and it have application details.

Let's see an example using the samples from SAP UI5 Library (sapui5.hana.ondemand.com).

• We access the examples page of a component list: 

https://sapui5.hana.ondemand.com/#/entity/sap.m.List/sample/sap.m.sample.ListCounter

• Press the F12 button to access the extension.


• 
  

  Click on the list component with the right mouse button (just above the text "Products") and select "Inspect UI5 control".

  
  


• 
  

  This shows us the UI5 ​​component that we have selected within the XML tree. In this case we see that it is a "List" component and we can see:

  
  
  
  
  
  1. Id assigned when generating the HTML dom in this case "#__list14"
  
  
  2. 
     

     All the elements that are added in the component of the type "StandardListItem"

     
     
  
  
  3. 
     

     Information of the binding

     
     
  
  
  4. 
     

     Properties of the component

     
     
  
  
  
  

 

• We detail point 3, we will see the data of the binding and what type of model is being used

 

• In the binding tab we have the information of the Path used (model).


• By selecting "Path" or "model", we can see the "Model Information" with the data loaded by the model.


• 
  

  On the other hand, if we select an element within the list, we can see the data referring to that row, in this case we see that the path is «/ ProductCollection» and position 2. This component uses two data: as a counter with field «Quantity» and title with field «Name» and their respective values.

  
  


• It is also interesting to see that these 2 values ​​are within the context of the component "__(Context)".


• Just as a curiosity, we can see the difference between the XML view that gives us the add-on and the DOM. We will take as an example id «__item763-list14-2»:

Thanks and enjoy the add-on

 

 

[mmcisme1]

I like this "how-to" blog.  But sadly - I'm not seeing the pictures.

Michelle

[enric101]

Thanks! It has gone back to upload the image and it seems that now it works

[former_member663438]

Hey Enric,
Thank you for this blog.

Somehow this link doesn't work for me.

If it has changed, can you please share the updated link with me ?

Thanks,

Shikha

[ViktorH]

Hi Shikha,

I cannot use the extension any more, as well. I get the message "Extensions cannot run in the chrome web store for security reasons". I guess unfortunatly chrome/google disabled the extension. I don't know why!?

Cheers,

Viktor

[Daniele_Sgi]

Hi,

the same happens to me :/, in the magical world of "open" (and unstable) applications (SAP help) !
Have you found an alternative to this tools?

Thanks.

Ds

[former_member596401]

Hello together,

yesterday I had still used it. As of today it is gone. Does anyone know alternatives ? The tool was a real asset.

Thanks for any alternative

[VictorHo]

Hello altogether,

In case you're using the SAPUI5 Inspector add-on and you couldn't find this add-on on your browser anymore.

Please below link to install the add-on manually.

https://github.com/SAP/ui5-inspector

(I have no idea why it's removed from the Browser store....)

Hope this helps!

Victor.

[ViktorH]

Hi DS,

my solution is to switch in the chrome extension (chrome://extensions/) into the developer mode. After that I can activate the extension again and it works for me.

Good luck,

Viktor

[aliceqiu]

Thanks, it works for me!!!