有沒有一種簡單的方法來找出哪一個js代碼的DOM元素被操縱？

我在看一個網站，看到一些有趣的東西：一個有趣的方式動畫的DOM元素。我想弄清楚它是如何完成的，因此我開始深入研究源代碼。我花了很多時間來追蹤這段代碼。有沒有一種簡單的方法來找出哪一個js代碼的DOM元素被操縱？

有誰知道一種方法來'追蹤'一個DOM元素，以便您可以檢測到它正在被操縱的代碼？

2012-10-23 Asciiom

[Find what javascript changes the DOM？]（http://stackoverflow.com/questions/11268457/find-what-javascript-changes-the-dom） – Bergi

在Chrome中，您可以添加DOM斷點。你可以找到更深入的解釋here。

總之，您在元素面板中選擇要檢查的DOM元素，並選擇Break On... - >Subtree Modifications。當DOM元素更改其結構時，您將被指向執行該操作的JS代碼。但是，如果您是專門用於製作動畫的JS代碼之後，那隻會改變元素的CSS，並且據我所知，沒有辦法打破這一點。

另一方面，Chrome也很靈活，讓你在瀏覽器中發生break on JavaScript events。由於jfrej suggested，你可以看到什麼動作觸發動畫並打破。

您可以使用相同的元素菜單（Break On...）將斷點設置爲Attributes modification，它也會在CSS更改中斷開。感謝Bergi作爲評論中的建議。試了一個simple example here。

2012-10-23 09:08:57

+1，謝謝你的建議，在我的情況恐怕是關於CSS固定DOM結構的操作，所以在這種情況下它不會幫助我，但是對於其他情況很瞭解！ – Asciiom

如果調試器能夠停止在DOMSubtreeModified事件上，它應該能夠停止在DOMAttrModified上 – Bergi

這就是說，你有這個選項。但我不知道這是否適用於CSS樣式更改。讓我嘗試。 :) –

在大多數情況下，JavaScript需要使用某種選擇器來修改HTML結構或應用CSS。想想選擇器可能是什麼 - 通常是ID或Class。

Firebug可以在多個文件中進行搜索 - 只需轉到腳本選項卡，重點搜索字段並檢查多個文件。這樣你應該能夠找到一些針對DOM元素的代碼。

或者，如果動畫是由事件觸發，如鼠標點擊，您可以使用Chrome的開發者工具來添加事件監聽器斷點下來源選項卡，將在相同的方式，DOM斷點描述工作通過Alex。

2012-10-23 09:21:29 jfrej

回答