在頁面加載之前使用 Firebug 調試 DOM 突變

Question

我在調試我正在運行的一些 JavaScript 代碼引入的 DOM 更改時遇到問題。 在代碼的某個地方，元素的 class 發生了變化，我試圖確定確切的位置。 不幸的是，新的 class 名稱太籠統了，以至於搜索所有 JS 代碼會給出太多的結果，這不是一個可行的選擇。

我已經嘗試使用 Firebug 進行一些調試，但盡管有很好的“屬性更改中斷”功能，但我無法讓它以我想要的方式工作。 Firebug 演示工作正常，但它是加載后的情況。

問題似乎是我想在頁面完全加載之前觀察突變。 我假設更改發生在$(document).ready()中的某處，所以它在 DOM 中，但我不能像演示（頁面加載后）那樣為UI 斷點提供 select 元素。

除了手動搜索/檢查代碼之外，還有其他方法可以調試這種情況嗎？

Answer 1

我建議您刪除更改其類名的目標元素。 運氣好的話，您可能會在 JavaScript 代碼中生成錯誤，因此您會發現問題出在哪里。

否則，如果它是由 JQuery (addClass) 完成的，您可能需要修改 JQuery 代碼本身以找出調用堆棧。

代碼如下所示（確保此代碼是包含 JQuery 后調用的第一個代碼）：

(function () {
    var addClass = jQuery.fn.addClass;
    jQuery.fn.addClass = function (value) {
        for (var i = 0, l = this.length; i < l; i++) {
            // Here you put your method to start the debugger if you get your right element
            if (this[i].id === "abc") {
                debugger;
            }
        }
        addClass(value);
    }
})();

希望有幫助。

Answer 2

這個答案可能聽起來很蹩腳，但老實說，我認為解決此類錯誤的最佳解決方案是“解構”您的程序。 只需復制整個項目，然后將其撕開。 一個一個地取出代碼塊。 將 function 調用轉換為存根函數或其他任何東西以保持運行。 找到觸發錯誤的最少代碼量。 那么解決方案應該是顯而易見的。

Answer 3

您是否考慮過添加突變事件？ webkit 不支持我認為您想要的事件DOMAttrModified ，因此您可能必須使用 Firefox 或 Opera 進行測試。 事實上，它在DOM level 3中已被棄用。

此處（文檔）和此處有兩個用於突變事件的 jQuery 插件，但是由於您想在頁面加載之前執行此操作，因此它們可能不是答案。

您可能最好為該事件編寫自己的 JavaScript 綁定 - 答案中有一個示例是否可以在 webkit 中使用 DOMAttrModified 的替代方法

我希望這有幫助。

Answer 4

如果要使用“Break on Attribute Change”功能進行調試，可以執行以下操作：

1. 除了基本的 jQuery 負載之外，注釋掉頁面中的所有 JS（希望全部在head中）。

2. 加載頁面並設置您的觀察點。

3. 向 HTML 添加一個觸發 JS 的按鈕。 或者，可選擇從控制台觸發它。

4. 觸發 JS 加載/觸發。 希望您的監視點和斷點會按需要觸發。

例如，假設您的頁面加載/具有：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script src="/Library_X.js" type="text/javascript"></script>
<script src="/MyJS.js" type="text/javascript"></script>

然后您可以在設置觀察點后在控制台中運行此代碼：

function addJS_Node (text, s_URL)
{
    var scriptNode                      = document.createElement ('script');
    scriptNode.type                     = "text/javascript";

    if (text)  scriptNode.textContent   = text;
    if (s_URL) scriptNode.src           = s_URL;

    document.head.appendChild (scriptNode);
}

addJS_Node (null, '/Library_X.js');
//-- Possible pause here.
addJS_Node (null, '/MyJS.js');
// etc.

或者臨時將一個觸發相同 JS 的按鈕編碼到頁面的 HTML 中。