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