google-chrome - 如何监听您使用 chrome 开发者工具所做的 DOM 更改

Question

我需要制作一个可以检测何时使用 Chrome 开发人员工具更新网页上的属性的应用程序。
例如。如果我打开开发人员工具，请使用元素选择器并更改特定元素的字体大小(见图)。我应该能够运行一个程序，通知页面上更新了哪些元素以及更改了哪些属性。

那怎么可能呢？

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