Question

我正在开发一个复杂的网络应用程序。

在其中，有一个div得到更新。它打印类似

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

某些地方的某些javascript可能会更新如下：

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

我的问题是：

我可以以某种方式拦截/（监听）innerHTML更改，以便我可以监视它们需要多长时间。

我处于可以注入任何javascript的位置，我想收集类似

的内容

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

如果您定位的浏览器为Mutation Events，则可以使用support them执行此操作。这是一个small jsFiddle demo，它应该在支持Mutation Events的浏览器中工作。我在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;
}

我可以监控HTML DIV的变化吗？

1 个答案: