善用Object.defineProperty巧妙找到修改某个变量的准确代码位置

时间 2019-11-19

标签善用 object.defineproperty object defineproperty 巧妙找到修改某个变量准确代码位置繁體版

原文原文链接

我今天的工做又遇到一个难题。前端UI右下角这个按钮被设置为"禁用(disabled)"状态。javascript

这个按钮的可用状态由属性enabled控制。我经过调试发现，一旦下图第88行代码执行完毕以后，这个按钮的属性mProperties里就多出一个enabled:false的属性。前端

而88行执行以前，尚未这个enabled:false的属性。正是这个属性让按钮进入了禁用状态。java

我单步调试setModel函数，花了半个小时的时间也没能找到这个enabled属性究竟是在哪一行代码加进去的。函数

因而我只有寻求其余办法。我想到了Object.defineProperty这个方法：工具

我在Chrome开发者工具里执行以下代码，首先根据button的ID用ui.byId方法找到这个被禁用按钮的实例，而后用Object.defineProperty给按钮实例的属性集合mProperties注入一个get方法，实现体只有一个debugger语句。如此一来，每次button的mProperties被访问时，都会自动触发一个断点。而mProperties属性发生变化时，一定会先产生读取动做，所以断点停下来时，我经过观察调用栈的上下文就可以找到是哪一行代码修改了mProperties。ui

var ui = sap.ui.getCore();

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

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

如今就来试试。果真断点自动触发了。我成功找到了我在寻找的给mProperties添加了enabled = false的代码位置。debug

要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码: 调试