eye5
OpenUI5 control instance viewer.
Useful for getting references to OpenUI5 controls during console debugging.
Play with eye5: https://jonbri.github.io/eye5
Motivation
While developing OpenUI5 applications, I found myself frequently following this pattern while debugging in the browser:
- inspect where I think the dom root of a control is
- almost always miss and have to dig around in the "Elements" tab for the desired dom ref
- copy the element's id to the clipboard
- paste the id into the console
- get a jQuery selector to the ref by wrapping with:
jQuery('#pastedId')
- finally, get the control reference with:
.control()[0]
After doing this a couple hundred times I decided to streamline the process with a small tool, hence eye5.
An alternative to eye5 is the "UI5 Inspector" Chrome plugin.
Usage
Load node_modules/eye5/dist/eye5.min.js
. The nature of this tool (on-the-fly debugging) means that it's often most convenient to simply copy-paste the distribution directly into the console. You can also integrate via NPM.
The search
function will return an array of control references as well as highlight the targeted controls with a display label.
Controls with button
in their id: eye5.search('button')
If you know an identifying part of an id, using a regular expression: var oButton = eye5.search(/toplevel.*-button0/)[0]
Searches will populate the "target" variables:
eye5.search('button');
// eye5.target -> first search result
// eye5.target1 -> second search result
// eye5.target2 -> third search result, etc
Get all controls with: eye5.all()
Configuration
config(object)
is used to configure eye5.
Properties:
-
standoutDelay
(default: 3000) -> search highlighting time -
labelStyle
-> css object for search labels -
controlStyle
-> css object control highlighting
Example:
eye5.config({
standoutDelay: 1000 // one second
controlStyle: { // change the highlight border
border: '1px solid red'
}
})
Build
npm install
npm test # run test suite (qunit, phantomjs)
npm run lint # eslint
npm run serve # http://localhost:9000/index.html
npm run package # generates eye5.min.js