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 and "all" 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
• showLabel -> whether to show labels around search matches
• labelStyle -> css object for search labels
• controlHighlighting -> whether to alter search target visually
• 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

License

BSD-2-Clause