在页面加载之前使用Firebug调试DOM突变

Question

我正在调试我正在运行的一些JavaScript代码引入的DOM更改问题.在代码的某处,元素的类被更改,我正在尝试精确定位.不幸的是,新的类名是如此通用,以至于搜索所有JS代码会产生太多结果,成为一个可行的选择.

我已经尝试过使用Firebug调试一下,但是尽管有一个很好的" Break on Attribute Change "功能,我无法让它以我想要的方式工作.Firebug演示工作正常,但它是一个后载情况.

问题似乎是我想在页面完全加载之前观察突变.我假设更改发生在某处$(document).ready(),因此它在DOM中,但我无法选择UI断点的元素,就像演示的情况一样(页面加载后).

有没有办法调试这种情况,而不是手动grepping /浏览代码？

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);
    }
})();

希望有帮助。