Найти javascript, который меняет элемент DOM

Существуют ли какие-либо методы, которые я могу использовать, чтобы найти, что javascript изменяет элемент HTML? У меня возникли проблемы с поиском того, как определенный элемент получает встроенный стиль display:none, добавленный при загрузке. Я знаю, что я найду script, который сделает это в конце концов, но я хочу, чтобы этот процесс был проще.

Мое идеальное решение было бы каким-то образом нарушить выполнение javascript, как только будет изменен элемент DOM. Я знаю, что у разработчиков Chrome есть возможность щелкнуть элемент правой кнопкой мыши и выбрать Break On > Adribute Modifications. Однако это происходит когда-то во время загрузки страницы, поэтому было бы очень приятно, если бы я мог вставить некоторые script перед всеми другими объявлениями script, в которых говорится: "Наблюдайте за элементом с классом XYZ" и прерывайте выполнение JS при изменении элемента, Затем выполнение JS либо сломается, где я могу увидеть JS, который изменил элемент, или, возможно, это можно найти, посмотрев на стек вызовов, но в любом случае я смог бы увидеть script, который вызвал разрыв бывает. Я нашел несколько ответов, которые рассказывают мне, как это сделать с помощью инструментов Chrome dev/Firebug, но, как я уже сказал, этот вопрос касается программного подхода.

Ответы

document.documentElement.addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
  }
}, false);