DOM屬性更改調試

不知何故在我的代碼中的某個地方在頁面上的元素之一獲得一個樣式屬性，我不指望它得到。即，它得到了style =「position：fixed」。我可以看到這發生在Firebug的HTML選項卡中，但在代碼中找不到它。該應用程序相當龐大，我不能簡單地查看所有代碼以找到該位置，此外，還有一些第三方庫正在使用（jQuery就是其中之一）。DOM屬性更改調試

所以，我的問題是，是否有可能以某種方式捕捉這種風格被改變，並獲得跟蹤？

來源

2009-08-10 Maxim Sloyko

嘛，一對夫婦的谷歌搜索和試驗了幾個小時之後，似乎最好的一個能做到這一點安裝一個MutationEvent處理器（Firefox支持它們）是這樣的：

var node_modified = function(evt) { 
    if(evt.attrName == 'style') { 
     alert('Style is changing from ' + evt.prevValue + ' to ' + evt.newValue); 
    } 
} 
var test_close = document.getElementById('test_close'); 
test_close.addEventListener('DOMAttrModified', node_modified, false);

的再設在代碼中進行某種記錄並查看此事件何時被觸發。不幸的是，您不能只在突變事件處理程序中設置斷點並查看堆棧跟蹤，因爲事件處理程序的堆棧跟蹤沒有關於事件觸發的代碼位置的信息。有點合乎邏輯，但我認爲用一些黑客入侵這個功能可以在Firebug中實現。

謝謝你的時間！

來源

2009-08-10 12:19:04

聽起來像你真的需要一個調試器。螢火蟲has one built in，否則你可以給Venkman一試，我覺得有點麻煩，但也許更有效..

祝你好運！ :)

來源

2009-08-10 09:38:51

嗯，我使用Firebug，但我找不到在屬性發生變化的地方設置斷點的方法，因爲我不知道它在哪裏，並且發現它正是我想要的。。 – 2009-08-10 10:46:52

在Google Chrome瀏覽器中，右鍵單擊頁面中的某個元素，然後選擇「檢查元素」。「開發工具」窗口或窗格將打開，並在源視圖中選擇該元素。然後，您可以右鍵單擊所選標籤並選擇「斷開屬性修改」。

來源

2011-06-30 18:26:00 rxgx

在頁面重新加載或在Angular中更改視圖時不起作用。 – Sammi 2016-09-16 09:06:53

在Firebug的html檢查器中，您可以右鍵點擊一個節點，並且有一個選項可以中斷屬性更改。

斷點通過頁面重新加載持續存在，您還可以瀏覽調用堆棧。

來源

2013-03-04 18:51:11 Jens

DOM屬性更改調試

回答

相關問題