DOM属性更改调试 [英] DOM attribute change debugging

问题描述

不知何故在我的代码中，页面中的一个元素会获得一个我不期望得到的样式属性。也就是说，它得到style =position：fixed。我可以在Firebug的HTML标签中看到这一点，但在代码中找不到。应用程序是相当大的，我不能简单地看看所有的代码找到的地方，此外，几个第三方库正在被使用（jQuery是其中之一）。

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

解决方案

MutationEvent 处理程序（Firefox支持它们）：

  var node_modified = function（evt）{
 if（evt.attrName =='style'）{
 alert（'Style is changed from'+ evt.prevValue +'to'+ evt.newValue） ; 
} 
} 
 var test_close = document.getElementById（'test_close'）; 
 test_close.addEventListener（'DOMAttrModified'，node_modified，false）;然后，在整个代码中设置一些日志记录，看看这个事件何时被触发。不幸的是，您不能在突变事件处理程序中设置断点并查看堆栈跟踪，因为事件处理程序的堆栈跟踪没有有关代码中的位置的信息，其中触发事件。有点合乎逻辑，但我认为有一些黑客这个功能可以在Firebug中实现。
 
 
 
谢谢你的时间！
 
Somehow somewhere in my code one of the elements on the page gets a style attribute which I don't expect it to get. Namely, it gets style="position:fixed". I can see this happening in HTML tab in Firebug, but can't find it in the code. The application is fairly big and I can't simply look through all of the code to find the place, besides, several third-party libraries are being used (jQuery is one of them).

So, my question is, is it possible to somehow catch this style being changed and get the trace?
解决方案
Well, after a couple of hours of googling and experimenting, it seems that the best one can do it setup a MutationEvent handler (Firefox supports them) like this:
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);
An then set up some kind of logging throughout your code and see when this event gets triggered. Unfortunately, you can't just set up a breakpoint in the mutation event handler and see the stack trace, because event handler's stack trace has no information about the place in the code, where the event got triggered. Kind of logical, but I think that with some hacking this feature can be implemented in Firebug.

Thank you for your time!

                        
这篇关于DOM属性更改调试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！