Отладка мутаций DOM с помощью Firebug перед загрузкой страницы - PullRequest
Новая
       10

Отладка мутаций DOM с помощью Firebug перед загрузкой страницы

6 голосов
/ 30 апреля 2011

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

Я попытался немного отладить с помощью Firebug, но, несмотря на хороший " Функция прерывания при изменении атрибута " , я не могу заставить его работать так, как хотелось бы.Демонстрация Firebug работает правильно, но это ситуация после загрузки.

Кажется, проблема в том, что я хочу следить за мутациями до полной загрузки страницы .Я предполагаю, что изменения происходят где-то в $(document).ready(), так что это в DOM, но я не могу выбрать элементы для точек останова пользовательского интерфейса , как это было бы в случае с демонстрацией (после загрузки страницы).

Есть ли способ отладки подобного рода ситуаций, кроме grepping / прохождения кода вручную?

Ответы [ 4 ]

3 голосов
/ 03 мая 2011

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

В противном случае, если это делает JQuery (addClass), вы можете изменить сам код JQuery просто для выяснения стека вызовов.

Код будет выглядеть следующим образом (убедитесь, что этот код является первым кодом, вызванным после включения JQuery): 

(function () {
    var addClass = jQuery.fn.addClass;
    jQuery.fn.addClass = function (value) {
        for (var i = 0, l = this.length; i < l; i++) {
            // Here you put your method to start the debugger if you get your right element
            if (this[i].id === "abc") {
                debugger;
            }
        }
        addClass(value);
    }
})();

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

1 голос
/ 05 мая 2011

Если вы хотите использовать функцию «Сломать при изменении атрибута» для отладки, вы можете сделать следующее:

  1. Закомментируйте все JS на странице (которые, как мы надеемся, все в head), за исключением базовой загрузки jQuery.

  2. Загрузите страницу и установите ваши часы наблюдения.

  3. Добавить кнопку, которая запускает JS, в HTML. Или, при необходимости, запустить его из консоли.

  4. Запустить нагрузку / пожар JS. Надеюсь, ваши часы и точки останова будут срабатывать по желанию.

Например, предположим, что ваша страница загружается / имеет: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script src="/Library_X.js" type="text/javascript"></script>
<script src="/MyJS.js" type="text/javascript"></script>

Затем вы можете запустить этот код в консоли после установки точек наблюдения: 

function addJS_Node (text, s_URL)
{
    var scriptNode                      = document.createElement ('script');
    scriptNode.type                     = "text/javascript";

    if (text)  scriptNode.textContent   = text;
    if (s_URL) scriptNode.src           = s_URL;

    document.head.appendChild (scriptNode);
}

addJS_Node (null, '/Library_X.js');
//-- Possible pause here.
addJS_Node (null, '/MyJS.js');
// etc.

Или временно закодировать кнопку, которая запускает тот же JS, в HTML-код страницы.

1 голос
/ 04 мая 2011

Рассматривали ли вы добавить событие мутации ? Событие, которое, я думаю, вам нужно, DOMAttrModified , не поддерживается в webkit, поэтому вам, возможно, придется протестировать его с Firefox или Opera. Фактически это устарело в DOM level 3 .

Существует два плагина jQuery для событий мутации здесь ( документация ) и здесь , но поскольку вы хотите сделать это до загрузки страницы, они могут быть не ответить.

Вероятно, вам лучше всего написать собственную привязку JavaScript для этого события - в ответе на есть пример, есть ли альтернатива DOMAttrModified, которая будет работать в webkit

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

1 голос
/ 03 мая 2011

Этот ответ может показаться довольно неубедительным, но я, честно говоря, считаю, что лучшим решением для таких ошибок является «деконструкция» вашей программы.Просто сделайте копию всего проекта, а затем разорвите его на части.Вынимайте куски кода один за другим.Превратите вызовы функций в функции-заглушки или что-то еще, чтобы все работало.Найдите минимальный объем кода, который вызывает ошибку.Тогда решение должно быть очевидным.

...