Line of code that is changing the DOM element

Question

I want to know how to pinpoint the line/position of code which is altering a specific DOM element or it's style. With Chrome DOMListner I see which elements get changed and what is the change but I cannot figure out which line of script caused that DOM change.

Example 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 shows a circle which follows the mouse cursor. Circle is positioned absolutely and onmousemove event triggers the change of circle position. This example is over-simplified and one can easily see where the top and left properties of a DOM element are changed.

I would like to find a method of finding the exact line/position of code for any JS script I stumble upon. Thanks

can't you see call stack in any point in debugger when you stop on the change? — webduvet, Sep 28 '15 at 11:03
I was unaware of the option that James Brierley gave. Now I can see the callstack :) . Thanks anyway — Jaka Dirnbek, Sep 28 '15 at 11:14

score 1 · Answer 1 · answered Sep 28 '15 at 11:05

1

In Chrome's developer tools, this option is available if you right click on a specific element. Selecting Break on... and then one of the sub-options will cause Chrome to break on the JavaScript line that made the change, so long as you had the tools open at the time.

answered Sep 28 '15 at 11:05

James Brierley

4,630
1
20
39

Similarly, you might find [object.watch](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch) helpful to see where a property is changed. – NoBugs Sep 29 '15 at 04:35

Line of code that is changing the DOM element

1 Answers1