How to listen in on DOM changes that you make with chrome developer tool

问题

I need to make an application that can detect when I use chrome developer tool to update attributes on a webpage. E.g. if I bring up the developer tool, use the elements selector and change the font size of a specific element (see picture). I should be able to have a program running that is notified with what element was updated on the page, and what attributes was changed.

How could that be done?

回答1:

It sounds like a mutation observor job. Have a look at https://developer.mozilla.org/en/docs/Web/API/MutationObserver

Example http://jsfiddle.net/3y3rpfq5/1/

Sample code:

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

来源：https://stackoverflow.com/questions/27187261/how-to-listen-in-on-dom-changes-that-you-make-with-chrome-developer-tool