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

Question

我在调试 DOM 更改时遇到问题，这些更改是由我正在运行的某些 JavaScript 代码引入的。在代码的某处，元素的类发生了变化，我正在试图查明位置。不幸的是，新的类名太过通用以至于搜索所有 JS 代码会得到太多结果而不是一个可行的选择。

我试过使用 Firebug 进行一些调试，但尽管 "Break on Attribute Change" feature 不错，我无法让它以我想要的方式工作。 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);
    }
})();

希望对您有所帮助。