善用Object.defineProperty巧妙找到修改某個變數的準確程式碼位置

我今天的工作又遇到一個難題。前端UI右下角這個按鈕被設定為”禁用(disabled)”狀態。

這個按鈕的可用狀態由屬性enabled控制。我通過除錯發現，一旦下圖第88行程式碼執行完畢之後，這個按鈕的屬性mProperties裡就多出一個enabled:false的屬性。

而88行執行之前，還沒有這個enabled:false的屬性。正是這個屬性讓按鈕進入了禁用狀態。

我單步除錯setModel函式，花了半個小時的時間也沒能找到這個enabled屬性到底是在哪一行程式碼加進去的。

於是我只有尋求其他辦法。我想到了Object.defineProperty這個方法：

我在Chrome開發者工具裡執行如下程式碼，首先根據button的ID用ui.byId方法找到這個被禁用按鈕的例項，然後用Object.defineProperty給按鈕例項的屬性集合mProperties注入一個get方法，實現體只有一個debugger語句。如此一來，每次button的mProperties被訪問時，都會自動觸發一個斷點。而mProperties屬性發生變化時，必定會先產生讀取動作，因此斷點停下來時，我通過觀察呼叫棧的上下文就能夠找到是哪一行程式碼修改了mProperties。

var ui = sap.ui.getCore();

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

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

現在就來試試。果然斷點自動觸發了。我成功找到了我在尋找的給mProperties新增了enabled = false的程式碼位置。

要獲取更多Jerry的原創技術文章，請關注公眾號”汪子熙”