正在更改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行上中斷，只要您在當時打開了該工具即可。