如何监听使用chrome开发人员工具进行的DOM更改

Question

我需要创建一个应用程序,可以检测何时使用chrome developer工具更新网页上的属性.例如,如果我调出开发人员工具,请使用元素选择器并更改特定元素的字体大小(参见图片).我应该能够运行一个程序,通知页面上更新了哪些元素,以及更改了哪些属性.

怎么可能这样呢？

Answer 1

这听起来像是突变观察员的工作。看看https://developer.mozilla.org/en/docs/Web/API/MutationObserver

示例http://jsfiddle.net/3y3rpfq5/1/

示例代码：

var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);