3

I am working on a complex web app.

In it, there is a div which gets updated. It prints something like 

[1/4]
[2/4]
[3/4]
[4/4]

Probably some javascript somewhere is updating with something like: 

div.innerHTML = "[2/4]";

My question is:

can I somehow intercept/(listen to) innerHTML changes so that I could monitor how long they take.

I am in a position where I could inject any javascript and I would like to collect something like

console.log("1/4 has been called at timestamp");
console.log("2/4 has been called at timestamp");
console.log("3/4 has been called at timestamp");
...
Praveen Kumar Purushothaman
  • 160,666
  • 24
  • 190
  • 242
Zo72
  • 13,873
  • 17
  • 69
  • 100
  • http://stackoverflow.com/questions/1091661/detect-element-content-changes-with-jquery – Timm Sep 14 '12 at 09:24

1 Answers1

3

You might be able to use Mutation Events to do this if the browsers you are targeting support them. Here is a small jsFiddle demo that should work in a browser that supports the Mutation Events. I tested this in Chrome 23

JavaScript:

var observable = document.getElementById('observable');

observable.addEventListener('DOMSubtreeModified', function(ev) {
  console.log(ev.target.nodeValue, ev.timeStamp);
}, false);

var i = 0;

observable.addEventListener('click', function(ev) {
    observable.innerHTML = ++i;
    return false;
}, false);​

HTML:

​<div id="observable">click me and look at the console</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

​#observable {
    background-color:lightblue;
    height:42px;
}​
andyb
  • 42,692
  • 12
  • 119
  • 148
  • Thanks for that... I will try that out... if it works I will mark it the right answer :-) – Zo72 Sep 14 '12 at 09:53
  • It worked I also forked your jsfiddle and made it specific to my original question: http://jsfiddle.net/4aPdf/ thanks a lot – Zo72 Sep 21 '12 at 12:29