使用Object.defineProperty如何巧妙找到修改某個變量的準確代碼位置

Object.defineProperty() 方法直接在一個對象上定義一個新屬性,或者修改一個已經存在的屬性, 並返回這個對象。下面這篇文章主要給大家介紹了關於使用Object.defineProperty如何巧妙找到修改某個變量的準確代碼位置的相關資料,需要的朋友可以參考下

前言

本文主要給大家介紹的是關於使用Object.defineProperty巧妙找到修改某個變量的準確代碼位置的相關內容,分享出來供大家參考學習,下面話不多說了,來一起看看詳細的介紹吧

語法

Object.defineProperty(obj, prop, descriptor)

參數

  • obj 需要定義屬性的對象。
  • prop 需被定義或修改的屬性名。
  • descripter 需被定義或修改的屬性的描述符。

發現問題

最近的工作又遇到一個難題。前端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的代碼位置。


總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對神馬文庫的支持。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章