正在更改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元素的顶部和左侧属性的更改位置。

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

Answer 1

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