当前位置:  开发笔记 > 编程语言 > 正文

DOM属性更改调试

如何解决《DOM属性更改调试》经验,为你挑选了2个好方法。

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

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



1> Ryan..:

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


在页面重新加载或在Angular中更改视图时不起作用。

2> Maxim Sloyko..:

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

感谢您的时间!

推荐阅读
TXCWB_523
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有