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


153

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

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

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

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

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

УСПЕХ:

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


2
Ваш вопрос помог, хотя я не попал на точку останова, используя источники, я выполнил в консоли следующий сценарий: document.body.addEventListener('mouseup',function(){ debugger; })Это привело меня к перерыву, и я смог проверить созданные элементы.
HMR

Ты жжешь. У меня была именно эта проблема с элементом управления React-Select, когда я не мог просмотреть HTML-элементы списка, потому что поддерево удалялось бы каждый раз, когда я нажимал. Необходимы идентификаторы предметов для автоматизации кликов с помощью Selenium. Спасибо!
araisbec

Ответы:


177

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

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

введите описание изображения здесь

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

введите описание изображения здесь


1
Чтобы избежать некоторой путаницы - отладчик будет останавливаться, когда вы запускаете событие, то есть вводить название места. Когда экран останавливается, просто нажмите кнопку воспроизведения на самом DOM, и вы сможете запустить событие.
Дилан Пирс

Это не работает, если страница захватила щелчок правой кнопкой мыши и выполняет свою функцию по щелчку правой кнопкой мыши.
Майкл

Это не работает для первого из двух диалогов в одном контейнере
Still_learning

@Still_learning Можете ли вы объяснить, что вы подразумеваете под «два диалога в одном контейнере».
arxpoetica

<v-container><v-dialog></v-dialog><v-dialog></v-dialog></v-container>- в моем случае первый диалог отображается только до тех пор, пока данные не поступят из БД, около 1 секунды
Still_learning

93

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

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

3
Отлично!! Это именно то, что я хотел
Даниэль Лойтертон

2
Я заметил, что это работает только тогда, когда у вас уже открыты инструменты разработчика на вкладке «Источники».
hbulens

3
он останавливает выполнение кода, но элемент все еще исчез (я использую React).
Лорем Ипсум Долор

Мой Chrome говорит F8 или Crtl + \ (не Crtl + /). Кроме того, Crtl + \ не работает в моем случае ...
Roger Veciana

Это не работает во всплывающих окнах управления видео Google ... элемент управления исчезает из вида, как только вы нажимаете клавишу, и полностью исчезает до того, как произойдет остановка.
Майкл

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

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


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

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

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

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


1
Это самый быстрый и самый стабильный способ отладки исчезающих элементов ^
warmwhisky

8

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

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

1
Спасибо за подробную инструкцию! После демонстрации чрезвычайной ловкости - щелкнув по кнопке, нажав Ctr + Shift + C, переместив указатель мыши на элемент и нажав F8в течение полутора секунд, - я наконец-то получил свой элемент в инспектируемом режиме
Still_learning

2

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

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

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

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

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

Себастьян


У Chrome также есть достойный инспектор. Проблема в том, что при щелчке правой кнопкой мыши элемент исчезает в моем случае. В Chrome также есть Break on DOM mutate. Проблема с этим - я не знаю, какой это элемент, так как он динамически генерируется
lukas.pukenis

1
Я только отредактировал свой ответ, чтобы дать подсказку, как узнать, что это за элемент.
Себастьян Зартнер

2

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

Шаги:

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

Вот демо:

введите описание изображения здесь


2

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

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


0

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

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


1
Да. Я заявлял, что изменения происходят слишком быстро в DOM, и страница сильно изменяет DOM, так что это действительно не решение, так как я не могу отличить нужные элементы от множества изменений везде :)
lukas.pukenis

вы можете попытаться отследить, что происходит, используя console.log, например, в начале функции, которую вы пытаетесь проверить, можете ли вы просмотреть объект css и т. д. Или замедлите изменения, пока вы не узнаете, что они работают должным образом, а затем измените скорость на ту, которую вы используете. хотите, чтобы это было, например, hide ('slow') в jquery
matpol

Проблема в том, что это не моя собственная кодовая база, а устаревшая, большая, старая кодовая база, в которой простой поиск по файлам ничего мне не дает .. :)
lukas.pukenis

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

2
как насчет этого: stackoverflow.com/questions/10213703/…
matpol

0

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.