0

I am writing a Chrome Plugin which needs to record all changes to the DOM. Also the ones made by the chrome devtools. I can use the MatationObeserver in a contentscript to get attribute changes but it is not possible to get inserted/removed Nodes by it done via the devtools. Anyone an idea?

1
  • You mean you are able to see mutations done via the scripts in the page but not when these mutations come from the dev tools?
    – unobf
    Dec 28, 2014 at 11:12

2 Answers 2

3

I think I missed "childList: true" as in :

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations, observer) {
    for(var mutation in mutations){
        modificationList.push(mutation);
    }
});

observer.observe(document, {
    subtree: true,
    attributes: true,
    characterData: true,
    childList:true
});

But I still do not know why. I thought subtree should be enough.

2
  • @MarcoBonelli This was the OP answering the question, not adding more info. Jan 31, 2015 at 20:51
  • Marcel, I added an answer to explain why you subtree works. Jan 31, 2015 at 21:00
3

As you pointed out in your own answer, you are missing subtree: true. I wanted to elaborate on why that is.

MutationObserver is focused on observing changes to individual nodes, and those changes come in 3 forms:

  • 'attributes' applies when 'target' is an Element and emits mutation records for changes to attributes, e.g. target.setAttribute.
  • 'characterData' applies when 'target' is a Text or CDataSection node and emits mutation records for changes to data, e.g. node.textContent = '' or node.data = ''.
  • 'childList' applies when 'target' is a Document or Element and emits mutation records when its children are moved around, e.g. node.appendChild and such.

It seems that your issue is a misunderstanding of childList. It does not create records when children are mutated, it creates records when the top node's gets gains or loses children.

So then we get to subtree, which basically says recursively watch. That means that any changes to children of the target will also be recorded by this observer, not changes purely to the target.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.