google chrome 除錯技巧:監控 DOM 元素被修改

匡匡發表於2018-01-04

在很多時候, 頁面上一個元素的屬於被修改、刪除,子節點的新增與修改,很難一下找到對應的程式碼,在 google chrome 開發者工具裡, 提供了對 DOM 元素的監控:

 

 

在 Elements 標籤, 右擊有監控的元素,在彈出來的選單中有一個 Break on 的選單項, 下面有三個子選單項

subtree modifcations: 監控當前元素子級元素結構的變化,新增結點和刪除節點,移動節點不知道算不算。

attribute modifcations: 監控當前元素屬性的變化。

node removal: 監控當前節點刪除。

 

當設定好這些後, 當指令碼修改這些元素時, google chrome 就會在修改程式碼那裡斷點, 方便我們找到修改元素的最終程式碼。

相關文章