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

Question

Во-первых, это не «Как создать наблюдателя мутации?» и я видел 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 также, такой же результат):

Answer 1

MutationObserver API, является асинхронным, так же, как Ajax. Рассмотрим an example в Chrome:

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

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

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

Answer 2

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

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

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