A small tip about using Object.defineProperty to efficiently find code location

[JerryWang]

I have met with a problem today: the button "Manage Certificate" is disabled, I need to find out why.

The enable / disable state of this button is controlled by enabled field in UI model.

I have made some debugging and found out that once the function setModel in line 88 below is executed, the enabled:false is set in button property attribute "mProperties".

And before line 88 is executed, the enabled attribute is not there. This observation confirms the fact that it is setModel which triggers the enabled:false is appended to mProperties.

I start to debug into setModel function and spent half an hour but could not get any useful finding - the implementation of this function is very complex and I get lost in the detail.

Then I decide to try another way.

I execute the following JavaScript code in Chrome development tool.

var ui = sap.ui.getCore();

var button = ui.byId("button97DXvDVKUawkYgK3YQVram_64");

Object.defineProperty(button, "mProperties", { get: function(){ debugger;}});

Brief explanation: first obtain button instance via function byId. The button ID could be got from debugging. And then register a "getter hook" on the mProperties of this button instance via Object.defineProperty. The body of getter hook has nothing but a debugger statement. I assume the breakpoint set by debugger keyword in this getter hook will be automatically triggered because before enabled:false is inserted to mProperties, the original content of mProperties should be read first.

I tried and it really works. When I execute setModel function in line 88, my getter hook is automatically triggered as I expect.

From the callstack in the debugger, I immediately find the exact code location where enabled:false is set by setProperty function.

Thanks to the power of Object.defineProperty which saves me lots of time to debug.

If you would like to know more of my tips how to use Chrome development tool efficiently, please refer to my tip collection article : Chrome Development Tool tips used in my daily work

Update

My colleague cong.wang1 just mentioned to me that If I would like simply to inspect the call of enabled getter / setter, it is supported by UI5 built-in diagnosis tool launched by "Ctrl+Alt+Shift+S".

Thanks for Cong's nice complement.

Nevertheless the tip introduced in this blog is more generic and could be applied to other UI framework besides SAP UI5.