更改 DOM 元素的代码行答案

【问题标题】：Line of code that is changing the DOM element更改 DOM 元素的代码行
【发布时间】：2015-12-25 14:16:57
【问题描述】：

我想知道如何确定更改特定 DOM 元素或其样式的代码行/位置。使用 Chrome DOMListner，我可以看到哪些元素发生了变化以及发生了什么变化，但我无法确定是哪一行脚本导致了 DOM 变化。

HTML

<div class="red circle absolute"></div>

CSS

body {
    margin: 0;
    padding: 0;
    font-size: 10px;
}
.red {
    background-color: #F44336;
    /* Material design 500 tint Red color */
 }
.circle {
    height: 3em;
    width: 3em;
    border-radius: 50%;
}

.absolute {
    position: absolute;
    top: 0;
    left: 0;
}

document.onmousemove = function (e) {
    // source: http://stackoverflow.com/questions/11245119/how-to-get-mouse-pointer-position-using-javascript-for-internet-explorer
    // as on: 28.09.2015
    var x = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    var y = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

    var el = document.getElementsByTagName('div')[0];
    el.style.left = (x - 15) + 'px';
    el.style.top = (y - 15) + 'px';
}

jsfiddle 显示一个跟随鼠标光标的圆圈。圆是绝对定位的，onmousemove 事件触发圆位置的变化。这个例子过于简单了，我们可以很容易地看出 DOM 元素的 top 和 left 属性在哪里发生了变化。

我想找到一种方法来找到我偶然发现的任何 JS 脚本的确切代码行/位置。谢谢

【问题讨论】：

当您停止更改时，您在调试器中的任何位置都看不到调用堆栈吗？
我不知道 James Brierley 给出的选择。现在我可以看到调用堆栈:)。还是谢谢

标签： javascript internet-explorer dom google-chrome-devtools firefox-developer-tools

【解决方案1】：

在 Chrome 的开发人员工具中，如果您右键单击特定元素，则此选项可用。选择Break on...，然后选择其中一个子选项将导致 Chrome 在进行更改的 JavaScript 行上中断，只要您当时打开了这些工具。

【讨论】：

同样，您可能会发现object.watch 有助于查看属性的更改位置。