如何找到哪個 JavaScript 正在改變元素的樣式？

Question

我有一個元素通過 JavaScript 應用了 styles。 我不確定到底在哪里； 有沒有辦法檢查 Firebug 以顯示“element.style”實際上來自哪里？

Answer 1

如果您確定它被設置為內聯style而不是樣式表規則的結果，您可以使用非標准 Mozilla watch()方法檢測更改：

document.body.style.watch('color', function(name, v0, v1) {
    alert(name+': '+v0+'->'+v1);
});
document.body.style.color= 'red';

可以放debugger; 在觀察者 function 中並在 Firebug 中查找調用堆棧以查看觸發更改的位置。

Answer 2

根據這個問題的要求：

如果您有 firefox，您可以檢查 HTML 選項卡中的“屬性更改中斷”選項。 只需右鍵單擊目標元素，就會彈出菜單。 之后，調整 window 的大小，它將在更改屬性的腳本行中中斷。

Answer 3

您還可以在設置樣式之前右鍵單擊 HTML 面板中的元素，並在屬性更改上斷開 select。 必須啟用腳本面板。

Answer 4

我認為這是這項工作的默認工具，盡管它的調試功能有限： https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

另外，請確保廣告攔截器不負責。

Answer 5

您可以打開腳本視圖並在搜索框中搜索“.style”。