Как вы получаете трассировку стека для запущенного MutationObserver?

Во-первых, это не "Как создать наблюдателя мутации"? и я видел API.

Мне было интересно, знает ли кто-нибудь способ показать "источник", когда произошла мутация. Скорее всего, это будет какое-то обходное решение - я не вижу упоминания об этом в документах API.

Я пытаюсь выяснить, где элемент получает свой display в style, установленный в none.

Мой код выглядит следующим образом:

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

У меня есть события мутации сервера, и они выглядят так:

{
    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"

}

Я просто хотел бы знать, где в источнике JS он исходит! Любые идеи?

Обратите внимание, что я попробовал ctrl + f, но безрезультатно.

Отладочный/Исключительный вывод (также проверенный WebkitMutationObserver для Chrome также тот же результат):

Ответ 1

Я знаю, что этот поток довольно старый, но, как и сейчас, инструмент из Chrome для отслеживания асинхронного вызова, я хотел бы упомянуть об этом.

Хронология вызова вызова Async, которая, как я думаю, выполнит обратную трассировку асинхронного вызова. Этот параметр можно найти в вкладке Инструменты разработчика → вкладка "Стек вызовов". И, включив опцию Async и положив точку останова на функцию обратного вызова MutationObserver, мы увидим полный стек вызовов.

Надеюсь, что это поможет.

Ответ 2

API MutationObserver асинхронен, как и Ajax. Рассмотрим пример в Chrome:

var xhr = new XMLHttpRequest();
xhr.open("GET", "/");
xhr.onload = function() { debugger; };
xhr.send();

Как вы, вероятно, знаете, onload не запускается до тех пор, пока текущая функция не будет выполнена. Таким образом, когда вызов debugger в onload выполняется, стек вызовов функции обязательно очищается, а обработчик onload работает в новом стеке.

Вы хотите знать, где происходит мутация свойства, но вы не можете получить эту информацию из трассировки стека - это было бы похоже на попытку узнать, где был вызван xhr.send(), с точки зрения onload обработчик.