sap / ui5-inspector

With the UI5 Inspector, you can easily debug and support your OpenUI5/SAPUI5 based apps.

About UI5 Inspector

UI5 Inspector is a standard Chrome or Edge extension for debugging and getting to know UI5 applications.

It's free and open source: UI5 Inspector is licensed under the Apache License, Version 2.0. See LICENSE.txt for more information.

Direct download and use

The latest released version can be downloaded and installed as follows:

1. Download zip file from Releases
2. Unpack to a directory
3. In Chrome open as url: chrome://extensions/. Alternatively, you can access edge://extensions/ when in Edge. The extensions page is also reachable via the browser's menu.
4. Check “Developer mode” setting and then choose "Load unpacked extension..."
5. From the newly opened window select the folder to which the zip file was unpacked
6. Restart Chrome or Edge
7. Open a OpenUI5/SAPUI5 based web application like: https://openui5.hana.ondemand.com/explored.html

Local development and use

You can get the source code locally and contribute to the project.

1. Clone the project locally: git clone [email protected]:SAP/ui5-inspector.git
2. Install dependencies with the following commands: npm install
3. In Chrome open as url: chrome://extensions/
4. Check “Developer mode” and then click "Load unpacked extension..."
5. From the newly opened window select the dist folder from the locally cloned project
6. Restart Chrome
7. Open a OpenUI5/SAPUI5 based web application like: https://openui5.hana.ondemand.com/explored.html

License

ui5-inspector's Issues

Not all ui5 versions suportet ?

Hi seems like currently not all ui5 versions are supported

from my perspective, the plugin should work with all versions

Empty Control Inspector

Running a simple app from WebIDE or from the Launchpad. When I open the UI5 inspector, it throws a blank page.

Your connection timed out. Please restart the dev tools panel and reload the page.

After update to 1.0.0, is constantly giving the message "Your connection timed out. Please restart the dev tools panel and reload the page." after some time of usage on the UI5 tab.
To recovery "UI5 Inspector" I need to reload the page.

Support for Focus Mode in Microsoft Edge

Description

In newer releases, Microsoft introduced the Focus Mode in Edge.
When this Mode is enabled, it is impossible to enable and access the UI5 tab used by the UI5 inspector extension.

OpenUI5/SAPUI5 version:

any

Browser/version:

Microsoft Edge Version 103.0.1264.49 (Official build) (64-bit)

URL (minimal example if possible):

App independent

User/password (if required and possible - do not post any confidential information here):

N/A

Steps to reproduce the problem:

1. enable Focus Mode, as detailed here
2. try to access the UI5 tab

What is the expected result?

UI5 Tab is available automatically or can be added via the + Button to the Edge DevTools, if the Focus Mode is active

What happens instead?

UI5 Tab is not available and can't be added to the Edge DevTools, if the Focus Mode is active

Any other information? (attach screenshots if possible)

Without Focus Mode:

With Focus Mode:

Inconsistent Version information shown in the UI5 Inspector

Hello SAP UI5 Inspector Team,

For quite some time I‘m always annoyed that the SAPUI5 version shown when I click the UI5 Inspector icon is actually the OpenUI5 Version as you can see in the screenshot below where I compare it with the output of ctrl+shift+alt+s:

The correct information is shown when you hover over the icon “This page is using SAPUI5 v1.80.2.

I would suggest that like in the SAPUI5 Diagnostics both versions should be shown in the pop-up.

Best regards
Gregor

Malfunction of the context menu: "Inspect UI5 control"

Hi there,

I am experiencing an issue with the context menu "Inspect UI5 control". It is supposed the component selected in the view should be automatically highlighted in the XML tree window of the extension but it does not happen.

I have tested the scenario with several Fiori applications and disabling all chrome extensions except "UI5 Inspector" but when I select the context menu option "Inspect UI5 control" over any component, it never discovers the location of that component in the extension's XML tree.

Thanks,
José Carlos

Duplicated horizontal scroll-bars

Check #50

"Inspect UI5 control" in Crome context menu doesn't work

It's issue present in 1.0.1 version.

No reaction from E-Mail address provided in chrome web store

Hello UI5 Inspector Team,

on 20th of August 2020 I've sent an E-Mail to [email protected] which is the one linked in the chrome web store

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

listing behind "Contact Developer". Unfortunately I haven't received any reply. Perhaps it would be better to link to the GitHub issues instead.

Best regards
Gregor

Circular json reference wasnt completaly resolved

Hi,

Based on the changes here #94 still the issue persists when you use SmartLink control. The complete Properties panel dissapear in case of sap.ui.comp.navpopover.SmartLink.
I resolved the issue with circular dependencies by adjusting _prepareMessage method, setting the current.target[key] = null in case of circular reference is found. I dont understand why we should use an existing dependency in the first place --> This may be the root of the new circular reference, because it may re-introduce a circular dependency. And anyway you dont really care for the information so deep into the JSON.

Once I did the above, the circular dependency disappeared, but I was playing around with a Fiori Application Smart Template List Report and the performance became a disaster. The _prepareMessage is very slow and makes the whole experience very bad. I would suggest adding an extra parameter called "level" (like the node.js util.inspect method) where you can determine in what kind of depth should the reading of properties stop. I think is a waste of time reading the complete depth, especially in aggregation, association object, where the depth can become very deep to handle.

Let me know if I can help you with something!

UI5-inspector extension is not working with Chrome

Hi,

I am newbie here in UI5. We want to automate the UI5 application and hence we have installed the extension.

I have installed the extension but it is showing disabled.

Chrome Version 70.0.3538.77 (Official Build) (64-bit)

Can you please help me to resolve the issue?

Thanks & Regards,
Sagar

Model Information only shows [object Object] as data

When I inspect an Element and navigate to Bindings the Model data is not shown anymore. Doesn't matter if it is an OData or JSON Binding. I only get something like this:

name: "modelName"
type: "sap.ui.model.json.JSONModel"
mode: "TwoWay"
data: [object Object]

UI5 Inspector Version is 0.9.13

Detection of the UI5 is not working correctly

The extension icon is active even the page didn't contain any ui5 framework.
The problem may be related to the Chrome update or the way we detect the framework.

UI5 Inspector outdated and removed from Google Webstore

The UI5 Inspector available on the Google Chrome Webstore was version 0.9.6 and was published in 2015 but there seems to be updates on the master branch but no releases.

It seems to have been removed from the Google Chrome Webstore. The link https://chrome.google.com/webstore/detail/ui5-inspector/bebecogbafbighhaildooiibipcnbngo returns a 404.

Dark theme

I would like to use the extension with my dark-theme of chrome. Is there any way of creating themes?
Checking the repo, I've seen you have a variables.less with the colors. So it seems that adding a new theme file, and somehow knowing which theme is selected in chrome, could be possible. What do you think?

thanks for making this plugin :D!

Does not work with SAP Web IDE

When I run the application from SAP Web IDE, and try to use the UI5 Inspector to troubleshoot the app, it says "There is no OpenUI5/SAPUI5 found on this page" (in UI5 tab of the DevTools).

Unable to read in dark DevTools.

It's really hard to read in Chrome DevTools with dark theme.

TypeError: Converting circular structure to JSON

When inspecting UI controls with bindings to an instance of sap.ui.model.base.ManagedObjectModel I see this kind of error:

Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'fnClass'
    |     property 'mAggregations' -> object with constructor 'Object'
    |     property 'items' -> object with constructor 'Array'
    |     ...
    |     index 0 -> object with constructor 'Object'
    --- property 'oListener' closes the circle
    at JSON.stringify (<anonymous>)
    at Object.send (main.js:849)
    at Object.do-control-select (main.js:108)
    at HTMLDocument.communicationWithContentScript (main.js:180)

In this case the model data is a UI5 control. The object graph for a UI5 control can contain cycles because of event listener object references, so a UI5 control cannot be serialised by using JSON.stringify() in an unmodified form.

Extension not working

Hi everyone,

For the past week I have not been able to use the extension because it's not working anymore for me.
The extension show nothing when opened.

I have tried to :

• Clear cache
• Uninstall - clear cache - reinstall
• "Reload frame"
• Check the extension console

Ui5 inspector is changing variable when debugging

Hi somehow the ui5 inspector is chanching local variables when debugging even non ui5 apps

Dark Theme in Browser broken

It seems the newer Chrome versions don't use the same styling pattern any more:

Original change for introducing dark theme: #75

Best regards,
Julian

UI5 Inspector no longer working in SAPUI5 v1.38. Error control.getMetadata(...).getProperty(...).getDefaultValue is not a function

In recent updates in SAPUI5 v1.38 is no longer possible to use UI5 Inspector. The error received in the console is the following : ToolsAPI.js:264 Uncaught TypeError: control.getMetadata(...).getProperty(...).getDefaultValue is not a function.

In toolsAPI.js at line 264, is where the issue is identified :
result.properties[key].isDefault = control.getMetadata().getProperty(key).getDefaultValue() === control.getProperty(key);

Automatic release publishing to Chrome Web Store

Today Version 0.9.11 was released. But it's not yet availalble in the Chrome Web Store. Seems that right now someone has to do the manual Update your Chrome Web Store item. But there is also Chrome Web Store Publish API. This API can be used either via this npm package: chrome-webstore-upload or that GitHub Action Chrome Extension upload & publish.

Does not scroll to nearest UI5 control

Does not scroll to nearest UI5 control when switched from Elements tab to UI5 tab

Geeting error on devtools
Blocked autofocusing on a form control in a cross-origin subframe.
main.js:699
code line

var desiredViewBottomPosition = this._treeContainer.offsetHeight - this._treeContainer.offsetTop + this._treeContainer.scrollTop;

Make currently selected control available in variable in command line

Similar to the Chrome DOM inspector, where you can access the currently selected DOM node with variable $0 the UI5 inspector should also support making the currently selected UI5 control available in a global variable in the command line, e.g. $ctrl or $c

Silent Failure when data model contains methods

Hi,

I tried the extension on an UI5 app we have and noticed that some of the nodes in our tree couldn't be inspected. After some debugging, I noticed in /scripts/content/main.js@L91 detectEvent.detail is null if any of the property in detectEvent.detail is a function. For a better understanding of the problem, please read: http://stackoverflow.com/questions/28699159/customevent-detail-tainted.
My suggestion to fix this problem would be to add a function at /scripts/modules/injected/message.js@L13 that does a copy of the detail without the functions.

Cheers,
Jean-Francois

Error "There is no OpenUI5/SAPUI5 found on this page'

I open an SAP Sample Frori Application, "Approve Purchase Order'. When I select a UI5 control (button or Text control, right click, an select "Inspect UI5 Control", the UI5 tab displays "There is no OpenUI5/SAPUI5 found on this page"

More details and overview in the Bindings tab

This is a proposal for enhancing the Bindings tab.

Motivation

What I would like to see as a developer when investigating into the binding of a property:

• the model => name, type and content
• the context => content
• the path
• the value from the model
• the formatted value
• the formatter function
• the value type
• the binding mode

Due the support of multi-binding, showing the model/path/value gets more complex. However, I would like to see all parts of the binding including the individual models, paths and values.

Furthermore I would like to change a bound value in the model and see its change reflected in the property. This would especially be useful for UI related bindings, e.g. visible, expanded, listMode, etc.

How it might look like

My proposal for the bindings tab is shown in the following picture:

Editing the values is enabled for all models with TwoWay bindingmode.

Changing the bound model value is not only reflected in the model information but also in the property and in the UI itself.

Implementation

A running version is available here: https://github.com/SeeSharpSoft/ui5-inspector/commits/BINDINGS_FEATURE_MODEL_DETAILS

Please note: This is not a final commit. Besides certain TODOs it also needs some conceptual rework.

I am looking forward getting feedback on this.

Firefox addon

I see there is https://addons.mozilla.org/en-US/firefox/addon/ui5-inspector/ but it's not from an SAP account. Is the above addon official or are there plans to officially support Firefox?

control inspector doesn't work in incognito

the following error appears in the service worker's console when opening the inspector in incognito:

Unchecked runtime.lastError: Cannot create item with duplicate id context-menu

Cannot inspect any element inside SAP Launchpad

I have several Apps inside my SAP Launchpad I'd like to inspect. The Structure inside the UI5 tab only shows the whole App as one Element: <sap.ushell.components.container.ApplicationContainer id="application-Item-List">

I also can't use right click > Inspect UI5 control. Is this not supported yet?

Support for OData V4 $batch requests in the OData Requests tab

Hi @IlianaB,

do you have any plans to support also OData V4 $batch requests?

In the moment only the $batch request is shown as a folder but the details can't be opened:

With a OData V2 request this works just fine.

Best Regards
Gregor

Right clicking on a a control, select UI5 Inspector > Inspect UI5 control doesn't show you the line

It seems that the UI5 Inspector is broken in the latest Chrome

1. Open any UI5 page, eg: https://ui5.sap.com/test-resources/sap/m/demokit/cart/webapp/index.html
2. Right click on any UI5 control and select UI5 Inspector > Inspect UI5 control
   
3. Expected: Line of the control is highlighted in the UI5 tab of the chrome debugger
   Actual: Nothing happens

This is on Windows 10, Chrome Version 107.0.5304.88 (Official Build) (64-bit), UI5 Inspector v1.3.0

Error when inspecting a UI using sap/ui/model/odata/v4/ODataModel

Hi,

when I use the inspector running on a view bound to an v4 ODataModel I get the following error:

ToolsAPI.js:331 UI5 Inspector:  Error: Unsupported operation: v4.ODataModel#getObject
    at constructor.ODataModel.getObject (ODataModel.js?eval:1044)
    at Object._getModelInfo (ToolsAPI.js:319)
    at ToolsAPI.js:452
    at Array.map (<anonymous>)
    at Object._getBindingContextsForControl (ToolsAPI.js:451)
    at Object.getControlBindings (ToolsAPI.js:515)
    at Object.do-control-select (main.js:106)
    at HTMLDocument.communicationWithContentScript (main.js:180)

Best,
Thorsten

detectUI5 throws an error

On row 33 in detectUI5.js
if (sap.ui.require) {
.....

I get an error
Uncaught TypeError: Cannot read property 'require' of undefined.
Add a check if sap.ui exists

I have the window.sap variable defined, but no ui is defined

UI5 Inspector failed No file

Download error when Im trying to get the UI5 Inspector extension for Chrome.

What can I do ??

Best regards
María Elena

UI5 Inspector not detecting UI5

Hi, I have added the UI5 Inspector to Chrome and when I run on browser from SAP Cloud Web IDE it is returning:

There is no OpenUI5/SAPUI5 found on this page

My friend sitting next to me with the same setup is able to use the add-on without issue.

Any ideas?

Missing explicit Privacy Statement

Ladies and Gentlemen,

I would like to use this Extension.

My Company, however, has restrictions that only internally released extensions can be installed. For each extension to be included in the Company-owned Chrome Extension catalog we need a privacy statement confirming which data the application stores in the cloud and when it will be deleted.
This can be a privacy statement on the website of the extension, or a corresponding statement by email from the manufacturer or similar.
The statement must explicitly refer to the extension. Can you please provide this for your extension?

Thank you for your support.

Mit freundlichen Grüßen /Kind regards

Can't see Properties and Binding for SmartFields

Hi,

When I click on any sap.ui.comp.smartfield.SmartField or SmartLabel nothing is refreshed in the Properties and Binding Pages on the right hand side. Is it supposed to work?

Best Regards,
Ilia

firefox support

Uncaught TypeError: Cannot read property 'mode' of null

Steps to reproduce

• open https://sapui5.hana.ondemand.com/test-resources/sap/ui/demoapps/demokit/rta/fiori-elements/test/index.html#masterDetail-display?sap-ui-theme=sap_fiori_3
• press "Go"
• select any sap.m.ColumnListItem node within the UI5 inspector control tree

Full exception

main.js:434 Uncaught TypeError: Cannot read property 'mode' of null
    at _extendOptionsForModelDataview (main.js:434)
    at main.js:528
    at Array.map (<anonymous>)
    at _assembleModelInfoDataview (main.js:525)
    at Object._getControlPropertiesFormattedForDataView [as getControlPropertiesFormattedForDataView] (main.js:985)
    at Object.getControlBindingsFormattedForDataView (main.js:1198)
    at Object.do-control-select (main.js:122)
    at HTMLDocument.communicationWithContentScript (main.js:193)

Further information

Seems to be caused by unhandled null entries in modelInfo.parts

Make configuration editable

Thanks for this great extension.

I have one enhancement / feature request:
It would be good if the configuration could be edited in the same way as the properties of a control.
So for example, change theme, rtl or debug mode.

Deprecated controls

Deprecated controls are not highlighted in "Control Inspector" based on sapui5 version.

firefox support

#182 was closed as completed with no comment, but there does not seem to be a firefox version available. there's this but it was last updated in 2018.

Ultrawide Screen Support

Using an ultrawide monitor with the developer tools embedded in the browser leaves you unable to interact with this extensions tab after a certain distance (approximately 2/3rds of the screen (3440 x 1440)).

This means if the developer tools are on the right hand side of the window, any portion if it within the '1/3rd unusable' portion cannot be interacted with.
E.g. this screenshot here highlighted in red is the portion of the tab which cannot be interacted with, in blue is the portion that can be.

Dragging the developer tools further to the left allows me to access more of the extension as one might expect. This same issue does not happen with any of the other developer tabs, only this extensions one.

Happens approximately 2300 pixels from the left.

Publishing UI5 inspector to Microsoft Extension Store?

Would it be possible to publish UI5 Inspector to Micrisoft Extensions Store?

would be extremely handy if the corporate forbids installing Chrome, and also blocks Chrome Extensions in Edge, and also blocks "Load unpacked" using policies.

The only allowed source for extensions is the MS Webstore for extensions

Thanks!

Error from highlighter

Error for trying to access property firstElementChild of null is thrown from highlighter.js:: setDimensions is the following scenario:

1. Open https://sapui5.hana.ondemand.com/
2. Open DevTools, then UI5 Inspector and highlight the DOM element(s) of controls(s) in the control tree
3. Close and reopen DevTools and re-highlight
   => console error from setDimensions
   

jQuery.sap.assert fires when inspecting controls with composite bindings

Whenever I inspect a control which has a composite binding jQuery.sap.assert fires n times. One time for every part of the composite binding.

This is extremely annoying and I would appreciate if this could be suppressed.

Please update dependencies

On a recent manual install I found a few of the dependencies to be outdated:

PS C:\bin> cd .\ui5-inspector
PS C:\bin\ui5-inspector> npm install
npm WARN engine [email protected]: wanted: {"node":">=0.8 <=0.12 || >=1 <=2"} (current: {"node":"4.4.0","npm":"3.3.12"})
npm WARN deprecated [email protected]: Grunt needs your help! See https://github.com/gruntjs/grunt/issues/1403.
npm WARN deprecated [email protected]: graceful-fs version 3 and before will fail on newer node releases. Please update
to graceful-fs@^4.0.0 as soon as possible.
npm WARN install Couldn't install optional dependency: Unsupported
npm WARN deprecated [email protected]: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
npm WARN deprecated [email protected]: module has been merged into crc32-stream
npm WARN deprecated [email protected]: graceful-fs version 3 and before will fail on newer node releases. Please update
to graceful-fs@^4.0.0 as soon as possible.
npm WARN deprecated [email protected]: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
npm WARN deprecated [email protected]: This package has been discontinued in favor of lodash@^4.0.0.
npm WARN prefer global [email protected] should be installed with -g

In the release `0.9.11` the version number remains un-updated `0.9.10`

In manifest.json version remained un-updated in the release 0.9.11: "version": "0.9.10".