sap / ui5-inspector Goto Github PK
View Code? Open in Web Editor NEWWith the UI5 Inspector, you can easily debug and support your OpenUI5/SAPUI5 based apps.
Home Page: https://sap.github.io/ui5-inspector/
License: Apache License 2.0
With the UI5 Inspector, you can easily debug and support your OpenUI5/SAPUI5 based apps.
Home Page: https://sap.github.io/ui5-inspector/
License: Apache License 2.0
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?
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"
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).
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?
Steps to reproduce
sap.m.ColumnListItem
node within the UI5 inspector control treeFull 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
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
Download error when Im trying to get the UI5 Inspector extension for Chrome.
What can I do ??
Best regards
María Elena
Check #50
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.
It's issue present in 1.0.1 version.
In manifest.json
version remained un-updated in the release 0.9.11
: "version": "0.9.10"
.
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?
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
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
This is a proposal for enhancing the Bindings tab.
What I would like to see as a developer when investigating into the binding of a property:
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.
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.
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.
It seems that the UI5 Inspector is broken in the latest Chrome
This is on Windows 10, Chrome Version 107.0.5304.88 (Official Build) (64-bit), UI5 Inspector v1.3.0
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
Deprecated controls are not highlighted in "Control Inspector" based on sapui5 version.
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.
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!
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
Error for trying to access property firstElementChild of null is thrown from highlighter.js:: setDimensions is the following scenario:
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
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
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.
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
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!
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
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.
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;
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
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.
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.
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.
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
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
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.
any
Microsoft Edge Version 103.0.1264.49 (Official build) (64-bit)
App independent
N/A
UI5 Tab is available automatically or can be added via the +
Button to the Edge DevTools, if the Focus Mode is active
UI5 Tab is not available and can't be added to the Edge DevTools, if the Focus Mode is active
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);
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!
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
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.