Как я могу проверить исчезающий элемент в браузере?

Как я могу проверить элемент, который исчезает, когда моя мышь уходит?

Я не знаю, это удостоверение личности, класс или что-то еще, но хочу проверить это.

Решения, которые я попробовал:

Запустите селектор jQuery внутри консоли, $('*:contains("some text")')но не повезло, главным образом потому, что элемент не скрыт, а, вероятно, удален из дерева DOM.

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

УСПЕХ:

Я успешно справился с контрольными точками событий. Конкретно - mousedown в моем случае. Просто зайдите Sources-> Event Listener Breakpoints-> Mouse-> mousedownв Chrome. После этого я щелкнул элемент, который хотел осмотреть, и внутри Scope Variablesувидел несколько полезных указаний.

(Этот ответ относится только к Chrome Developer Tools. См. Обновление ниже.)

Найдите элемент, который содержит исчезающий элемент. Щелкните правой кнопкой мыши на элементе и примените «Разбить на ...> Изменения поддерева». Это сбросит паузу отладчика до исчезновения элемента, что позволит вам взаимодействовать с элементом в состоянии паузы.

Обновление 22 октября 2019 года: с выпуском версии 70 похоже, что FireFox наконец-то поддерживает этот вид отладки 2 3 :

Альтернативный метод в Chrome:

• Откройте devTools (F12).
• Выберите вкладку «Источники».
• Пока отображается нужный элемент, нажмите F8 (или Ctrl + /). Это прервет выполнение скрипта и "заморозит" DOM ​​в точности так, как он отображается.
• С этого момента используйте Ctrl + Shift + C, чтобы выбрать элемент.

1. Открытая консоль
2. Введите setTimeout(()=>{debugger;},5000);
3. нажмите Ввод

Теперь у вас есть 5 секунд, чтобы ваш элемент появился. Как только оно появилось, подождите, пока отладчик не сработает. Пока вы не возобновите, вы можете играть со своим элементом, и он не исчезнет.

Полезный совет, чтобы не повторять эти шаги каждый раз:

добавить это как букмарклет:

1. Добавьте в закладки любую страницу
2. Изменить эту новую закладку
3. Замените URL / местоположение на: javascript:(function(){setTimeout(()=>{debugger;},5000);})();

В следующий раз, когда вы захотите использовать это, просто нажмите / коснитесь этой закладки.

Я использую Chrome на Mac, я выполнил вышеописанные шаги, но постараюсь объяснить немного подробнее:

1. Щелкните правой кнопкой мыши и перейдите, чтобы проверить элемент.
2. Перейти на вкладку источников.
3. Затем наведите курсор на элемент.
4. Затем с помощью клавиатуры F8 или Command(Window) \ . Это приостановит экран в статическом состоянии, и элемент не исчезнет при наведении.

В Firebug для этого есть разные решения:

1. Вы можете использовать Break On Mutate внутри панели HTML. (с этим вы также сможете узнать, что это за элемент)
2. Вы можете щелкнуть правой кнопкой мыши по элементу и выбрать « Проверить элемент с помощью Firebug».

Также вы можете захотеть следить за выпуском 551 , в котором запрашивается способ временно блокировать определенные события.

Редактировать:

Чтобы выяснить, какой это элемент, вы также можете включить параметры панели HTML « Выделить изменения» , « Развернуть изменения» и « Прокрутить изменения в представлении», чтобы сделать элемент видимым внутри панели HTML.

Себастьян

В моем случае я использовал опцию « Развернуть рекурсивно» в Google Chrome:

Шаги:

1. Осмотрите выпадающее поле
2. Найдите динамический DOM (фиолетовая подсветка)
3. Щелкните правой кнопкой мыши на этом динамическом DOM
4. Выберите Расширить рекурсивно :
5. Мы можем видеть все элементы там

Вот демо:

Наведите указатель мыши на элемент и нажмите F8 (это в Chrome), чтобы приостановить выполнение скрипта. Состояние наведения останется видимым для вас.

Вы попадете на вкладку источников. Вернитесь на вкладку Элементы. Этот временной код не будет уничтожен.

Вы можете просмотреть элементы, появляющиеся и исчезающие в инспекторе под элементами. Если вы перейдете к элементу, когда он виден, вы сможете увидеть его исчезновение или увидеть изменение его css при изменении его статуса.

Это возможно с Firebug в Firefox или встроенным инспектором в Chrome.

У меня была та же проблема, но я использую Firefox, она исчезает, как только я открываю, элемент inspect нашел решение: откройте 4 черты (настройки), перейдите в раздел веб-разработчик> Отладчик и сразу нажмите клавишу F8, которая является ярлыком для паузы, которая останавливает сценарий. прежде чем он пнуть и обнаружить, что вы открыли инструменты для разработчиков