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

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

Но мне также очень хотелось бы не просматривать все мои javascript-поиск ссылок/селекторов, которые могут вызвать проблему.

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

Ответы

Ответ 1

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

В Firebug:

  • Перейдите на вкладку HTML
  • Щелкните правой кнопкой мыши элемент, который вы хотите отслеживать.
  • Выберите "Изменение атрибута прерывания" или "Перерыв на дочернем добавлении или удалении" или "Удаление элемента управления"

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

  • Перейдите на вкладку Элементы
  • Щелкните правой кнопкой мыши элемент, который вы хотите отслеживать.
  • Выберите "Break On...", затем выберите "Subtree Modification" или "Изменение атрибутов" или "Node" Удаление "

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

Ответ 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);