我可以监控HTML DIV的变化吗？ [英] can I monitor changes on an HTML DIV?

问题描述

我正在处理一个复杂的网络应用程序。

I am working on a complex web app.

其中有一个div被更新。
它打印像

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

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

可能有些javascript正在更新像：

Probably some javascript somewhere is updating with something like:

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

我的问题是：

以某种方式拦截/（听）innerHTML的更改，以便我可以监控他们花费多长时间。

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

我可以注入任何javascript，我想收集像

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

推荐答案

你可能要使用突变事件，如果您要定位的浏览器支持他们。这是一个 小jsFiddle演示 ，它应该在支持突变事件的浏览器中工作。我在Chrome 23中测试了这个。

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：

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的变化吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！