First off, this is not a "How to create a mutation observer?" post and I have seen the APIs.

I was wondering if anyone knows a way to display the "source" of when a mutation occurred. It would most likely be some sort of workaround - I can't see any mention of this in API docs.

I am trying to find out where an element is getting its display in style set to none.

My code looks like this:

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function (mutation) {
        if (mutation.attributeName === "style") {
            var extendedMutation = _.extend({}, mutation, {
                newValue: $(mutation.target).attr("style")
            });

            console.log(extendedMutation);
        }
      });
});

observer.observe(row.element[0], { attributes: true, attributeOldValue: true });

I have several mutation events and they look along the lines of this:

{
    addedNodes: NodeList[]

    attributeName: "style"

    attributeNamespace: null

    newValue: "display: none;"

    nextSibling: null

    oldValue: ""

    previousSibling: null

    removedNodes: NodeList[]

    target: li#d526d311-e6e0-4ef1-a3a1-f8686bbb468f.group

    type: "attributes"

}

I'd just like to know where in the JS source it's ing from! Any ideas?

Please note I have tried ctrl+f, but to no avail.

Debugger / Exception output (tried WebkitMutationObserver for Chrome also, same result):

First off, this is not a "How to create a mutation observer?" post and I have seen the APIs.

I was wondering if anyone knows a way to display the "source" of when a mutation occurred. It would most likely be some sort of workaround - I can't see any mention of this in API docs.

I am trying to find out where an element is getting its display in style set to none.

My code looks like this:

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function (mutation) {
        if (mutation.attributeName === "style") {
            var extendedMutation = _.extend({}, mutation, {
                newValue: $(mutation.target).attr("style")
            });

            console.log(extendedMutation);
        }
      });
});

observer.observe(row.element[0], { attributes: true, attributeOldValue: true });

I have several mutation events and they look along the lines of this:

{
    addedNodes: NodeList[]

    attributeName: "style"

    attributeNamespace: null

    newValue: "display: none;"

    nextSibling: null

    oldValue: ""

    previousSibling: null

    removedNodes: NodeList[]

    target: li#d526d311-e6e0-4ef1-a3a1-f8686bbb468f.group

    type: "attributes"

}

I'd just like to know where in the JS source it's ing from! Any ideas?

Please note I have tried ctrl+f, but to no avail.

Debugger / Exception output (tried WebkitMutationObserver for Chrome also, same result):

• javascript
• mutation-observers

2 Answers 2

I know this thread is pretty old, but as nowadays there's a tool from Chrome to trace asynchronous call, I would like to mention it.

Chrome call stack Async option which I think would fulfill back trace of an asynchronous call. This option can be found in Developer tools -> Call stack tab. And by switching on the Async option and put break point on MutationObserver callback function, we would be able to see the full call stack.

Hope it helps.

https://developer.mozilla/en-US/docs/Web/API/MutationEvent did what you're asking for. It was deprecated for various reasons related to performance etc. One issue was that having DOM mutation handlers that can themselves mutate the DOM plicates things, and for that reason they made MutationObserver run later.

However, while MutationEvent is deprecated, it still works for me (Chrome v112); furthermore the patibility table in the MDN link above says it works in all browsers. So I'd suggest using it until the browsers get round to removing it.