找出更改頁面中特定html內容的javascript代碼的最佳方法是什么？

Question

我在我的網頁上有<p>標簽，我試圖找出在此元素中添加文本的JavaScript函數，是否有任何特定的方法在chrome中添加此標記上的偵聽器以找出在此標記上寫入的腳本？

Answer 1

最直接（低噪音）方式使用同步暫停，讓您在整個調用堆棧中徘徊：

1. 打開chrome的devtools。
2. 右鍵單擊devtools“Elements”選項卡中的元素以顯示上下文菜單
3. 選擇Break On ...> Subtree Modifications。

一旦元素的“innerHTML”發生變化，腳本執行將暫停，您可以在“Sources”選項卡中查看整個調用堆棧，包括請求DOM更改的任何函數。

某些DOM修改（如動畫庫）可以使用setTimeout或回調來丟棄導致更改的大部分調用堆棧，在這種情況下，Profile可能會更有趣，因為動畫功能應該像一個痛苦的拇指一樣突出一個“沉重”的觀點。