Use Object.defineproperty to cleverly find the exact code location to modify a variable

I have another problem with my work today. The bottom right corner of the front-end UI This button is set to "Disabled (disabled)" status.

The available state of this button is controlled by the properties enabled. I found through debugging that once the 88th line of code is executed, the property of this button mproperties a enabled:false attribute.

There is no property for this enabled:false until 88 rows have been executed. It is this property that allows the button to enter a disabled state.

I debugged the Setmodel function one step at a time, and it took me half an hour to find out which line of code the Enabled property was added to.

So I had to find other ways. I thought of object.defineproperty this method:

I execute the following code in the Chrome developer tool, First use the Ui.byid method to find the disabled button instance according to the button's ID, and then inject a get method with Object.defineproperty to the button instance's attribute collection mproperties, the implementation body has only one debugger statement. This will automatically trigger a breakpoint each time the button's mproperties is accessed. When the Mproperties property changes, it must first generate a read action, so when the breakpoint stops, I can find out which line of code modifies the Mproperties by observing the context of the call stack.

var ui = sap.ui.getCore();var button = ui.byId("button97DXvDVKUawkYgK3YQVram_64");Object.defineProperty(button, "mProperties", { get: function(){ debugger;}});

Let's try it now. Sure enough, the breakpoint is automatically triggered. I managed to find what I was looking for. Adds the code location to mproperties with Enabled = False.

To get more original Jerry's technical articles, please follow the public number "Wang Zixi" or scan the QR code below:

Use Object.defineproperty to cleverly find the exact code location to modify a variable