Могу ли я порвать с отладчиком на все изменения элемента DOM?

Question

Мне бы очень хотелось увидеть код, который влияет на определенный элемент DOM.

Но мне бы очень хотелось, чтобы мне не приходилось просматривать весь мой javascript для поиска ссылок / селекторов, которые могли быбыть причиной проблемы.

Есть ли у кого-нибудь способ заставить отладчик браузера ломать какие-либо изменения в конкретном элементе DOM?Я не против того, чтобы для работы требовался конкретный браузер или расширение.

Answer 1

Это также выполнимо без написания каких-либо сценариев в Firebug, а также в инструментах разработчика Chrome (возможно, других, не проверял далее).

В Firebug:

1. Перейти кВкладка HTML
2. Щелкните правой кнопкой мыши элемент, который вы хотите отслеживать
3. Выберите «Разрывать при изменении атрибута», или «Разрывать добавление или удаление потомков», или «Разрывать удаление элемента»

В Инструментах разработчика Chrome

1. Перейти на вкладку Элементы
2. Щелкните правой кнопкой мыши элемент, который вы хотите отслеживать
3. Выбрать«Break On ...», затем выберите «Subtree Modification», или «Attributes Modification», или «Node Removal»

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

Answer 2

Примечание: события, указанные ниже, были великолепны, когда задавался вопрос, но больше не актуальны. Рекомендуемая альтернатива - MutationObservers, но они все еще имеют срок действия

MutationObserver на MDN

---

Попробуйте это (в Firefox, с Firebug установлен):

function breakOnChange(el) {

    if (!el.addEventListener) return;

    el.addEventListener('DOMAttrModified',
         function(DOMAttrModifiedEvent){debugger}, true);

    el.addEventListener('DOMNodeInserted',
         function(DOMNodeInsertedEvent){debugger}, true);

    el.addEventListener('DOMNodeRemoved',
         function(DOMNodeRemovedEvent){debugger}, true);

}

// Usage:
breakOnChange(someDomNode);