善用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的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: 調試