Question

在我的代码中的某个地方，页面上的一个元素获得了一个我不希望它得到的样式属性。即，它得到style =“position：fixed”。我可以在Firebug的HTML选项卡中看到这种情况，但无法在代码中找到它。应用程序相当大，我不能简单地查看所有代码来找到这个地方，此外，正在使用几个第三方库（jQuery就是其中之一）。

所以，我的问题是，是否有可能以某种方式抓住这种风格被改变并获得追踪？

Answer 1

在Google Chrome中，右键单击页面中的元素，然后选择“检查元素”。将打开“开发人员工具”窗口或窗格，并在源视图中选择该元素。然后，您可以右键单击所选标签，然后选择“中断属性修改”。

Answer 2

好吧，经过几个小时的谷歌搜索和实验，似乎最好的人可以设置一个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中实现。

感谢您的时间！

Answer 3

在Firebug的html检查器中，您可以右键单击某个节点，并且可以选择中断属性更改。

断点在页面重新加载时仍然存在，您还可以浏览调用堆栈。

Answer 4

听起来你真的需要一个调试器。萤火虫has one built in，否则你可以试试Venkman，我发现它有点麻烦但也许更有效..

祝你好运！：）

DOM属性更改调试

4 个答案: