Can I monitor changes on an HTML DIV?

Question

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");
...

Answer 1

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