Question

我遇到了一些我正在运行的JavaScript代码引入的调试DOM更改的问题。在代码的某处，元素的类被更改，而我试图精确定位。不幸的是，新的类名是如此通用，以至于搜索所有JS代码会产生太多结果，无法成为可行的选项。

我已尝试使用Firebug进行一些调试，但是尽管 "Break on Attribute Change" feature 很好，但我无法以我想要的方式工作。 Firebug演示工作正常，但这是一个后载情况。

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

除了 grepping /手动执行代码之外，还有其他方法可以调试这种情况吗？

Answer 1

我建议您删除其类名更改的目标元素。运气好的话，您可能会在JavaScript代码中生成错误，因此您可以找到问题所在。

否则，如果它是由JQuery（addClass）完成的，您可能想要修改JQuery代码本身只是为了找出callstack。

代码看起来像这样（确保此代码是包含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

这个答案可能听起来很蹩脚，但老实说，我认为像这样的错误的最佳解决方案是“解构”你的程序。只需复制整个项目，然后撕开即可。逐个取出代码块。将函数调用转换为存根函数或其他任何东西以保持运行。找到触发错误的最少量代码。那么解决方案应该是显而易见的。

Answer 3

您考虑过添加mutation event吗？我认为您想要的事件DOMAttrModified在webkit中不受支持，因此您可能需要使用Firefox或Opera进行测试。事实上，它已在DOM level 3中弃用。

有两个jQuery插件用于突变事件here（documentation）和here，但由于您希望在页面加载之前执行此操作，因此可能不是答案。

你可能最好为这个事件编写自己的JavaScript绑定 - is there an alternative to DOMAttrModified that will work in webkit的答案中有一个例子

我希望这会有所帮助。

Answer 4

如果要使用“Break on Attribute Change”功能进行调试，可以执行以下操作：

注释掉页面中的所有JS（除了基本的jQuery加载之外，希望全部都在head中）。
加载页面并设置观察点。
添加一个触发JS的按钮到HTML。或者，可选择从控制台启动它。
触发JS load / fire。希望你的手表和断点可以根据需要点燃。

例如，假设您的页面加载/具有：

<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中。

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

4 个答案: