在很多時候, 頁面上一個元素的屬於被修改、刪除,子節點的新增與修改,很難一下找到對應的程式碼,在 google chrome 開發者工具裡, 提供了對 DOM 元素的監控:
在 Elements 標籤, 右擊有監控的元素,在彈出來的選單中有一個 Break on 的選單項, 下面有三個子選單項
subtree modifcations: 監控當前元素子級元素結構的變化,新增結點和刪除節點,移動節點不知道算不算。
attribute modifcations: 監控當前元素屬性的變化。
node removal: 監控當前節點刪除。
當設定好這些後, 當指令碼修改這些元素時, google chrome 就會在修改程式碼那裡斷點, 方便我們找到修改元素的最終程式碼。