How do you get a stack trace for a triggered MutationObserver?

Question

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 coming from! Any ideas?

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

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

Answer 1

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.