Отладка изменения атрибута DOM

Question

Каким-то образом в моем коде один из элементов на странице получает атрибут стиля, который я не ожидаю получить. А именно, он получает style = "position: fixed". Я вижу, что это происходит на вкладке HTML в Firebug, но не могу найти это в коде. Приложение довольно большое, и я не могу просто просмотреть весь код, чтобы найти место, кроме того, используются несколько сторонних библиотек (jQuery - одна из них).

Итак, мой вопрос: возможно ли каким-то образом поймать изменение этого стиля и получить след?

Answer 1

В Google Chrome щелкните правой кнопкой мыши элемент на странице и выберите «Проверить элемент». Откроется окно или панель инструментов разработчика с выбранным элементом в исходном представлении. Затем вы можете щелкнуть правой кнопкой мыши по выбранному тегу и выбрать «Сломать модификации атрибутов».

Answer 2

Что ж, после пары часов поиска в Google и экспериментов, кажется, что лучше всего это настроить обработчик MutationEvent (Firefox их поддерживает), например:

var node_modified = function(evt) {
    if(evt.attrName == 'style') {
        alert('Style is changing from ' + evt.prevValue + ' to ' + evt.newValue);
    }
}
var test_close = document.getElementById('test_close');
test_close.addEventListener('DOMAttrModified', node_modified, false);

Затем настройте какую-нибудь запись в коде и посмотрите, когда сработает это событие. К сожалению, вы не можете просто установить точку останова в обработчике событий мутации и увидеть трассировку стека, потому что трассировка стека обработчика событий не имеет информации о месте в коде, где произошло событие. Вроде логично, но я думаю, что при некотором взломе эту функцию можно реализовать в Firebug.

Спасибо за ваше время!

Answer 3

В html-инспекторе Firebug вы можете щелкнуть правой кнопкой мыши по узлу, и есть возможность прервать изменение атрибута.

Точки останова сохраняются после перезагрузки страницы, и вы также можете просматривать стек вызовов.

Answer 4

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

Удачи! :)