Как вы отлаживаете исчезающие элементы с помощью Firebug / Dev Tools на своих сайтах?

Question

Как вы отлаживаете исчезающие элементы с помощью Firebug / Dev Tools на своих сайтах?

У меня есть div, который исчезает при отпускании / выходе мыши;Я хотел бы изучить этот div с помощью отладчика, но по пути в окно firebug / debugger исчезает div, который я хочу просмотреть.

У кого-нибудь есть хитрости для достижения этой цели?

РЕДАКТИРОВАТЬ: - Дисплей не помечен: нет, но удален из DOM.Делая это немного сложнее найти, если он ушел: -)

Answer 1

Чтобы отладить исчезающий элемент с помощью DevTools, вы можете легко разбить изменения поддерева и атрибутов или удалить узел, выбрав элемент и в контекстном меню выбрать « Разбить на ... » (как показано ниже).

В качестве альтернативы вы можете попробовать Визуальное событие или Визуальное событие 2 , которое может показать отладочную информацию особытия, которые были прикреплены к элементам DOM.См .: Как найти прослушиватели событий на узле DOM?

Answer 2

Ссылка это jsFiddle для примера исчезающих узлов при наведении мыши .

Обратите внимание, что некоторые другие ответы не будут обрабатывать / перехватывать контент iFramed. Эти два метода ...

Как сказал ОП, самый простой способ поймать эти элементы - использовать функцию Firebug Break On Mutate .

---

Другая простая альтернатива - просто сохранить файл :

1. При наведении мышью на соответствующий элемент ...

2. Нажмите Control S . Функция «Сохранить как» сохраняет сгенерированный код .
   Для сайтов, которые переопределяют Control S , например jsFiddle, нажмите Alt F , затем A (на компьютерах с Windows, в любом случае).

3. Откройте сохраненный код, и вы увидите там мимолетные элементы. Содержимое iFramed будет находиться в подпапке _files .

Answer 3

Ctrl + Shift + C - комбинация клавиш быстрого доступа для проверки элемента. Из FireBug Wiki .

Answer 4

1. Открыть Firebug.
2. Найдите div в разметке.

Дополнительные очки, если вы используете Ctrl + F, чтобы найти его!

Answer 5

Щелкните правой кнопкой мыши на элементе, чтобы вызвать контекстное меню, и выберите «Проверить элемент».

ОБНОВЛЕНИЕ: чтобы указать, что элемент удаляется из DOM, а не скрывается.

http://jsfiddle.net/x3v3q/

$('#mydiv').mouseout(function(){
    alert('hi');    
});


$('*').unbind();

Используя jQuery, вы можете отменить привязку всех событий ко всем элементам на странице.Если вы запустите код jsfiddle, вы увидите, что он работает, когда комментируется «unbind».Но запуск «unbind» удаляет все обработчики событий из элемента.

Если вы запускаете unbind из консоли firebug, перед удалением элемента вы можете щелкнуть правой кнопкой мыши и «Inspect Element» или использовать один из другихпредложения по его проверке.

Если на страницу не загружен jQuery, вы можете установить плагин FireQuery и нажать «jquerify», чтобы добавить jQuery на страницу, на которой он еще не загружен.См. https://addons.mozilla.org/en-US/firefox/addon/firequery/

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