javascript - 更改 DOM 元素的代码行

Question

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

示例 jsfiddle

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;
}

JS

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 脚本的确切代码行/位置。谢谢

Answer 1

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