Подтвердить что ты не робот

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

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

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

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

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

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

УСПЕХ:

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

4b9b3361

ОТВЕТЫ

Ответ 1

(Этот ответ применим только к средствам разработчика Chrome.)

Найдите элемент, содержащий исчезающий элемент. Щелкните правой кнопкой мыши на элементе и примените "Break on... > Subtree Modifications". Это вызовет паузу отладчика до исчезновения элемента, что позволит вам взаимодействовать с элементом в приостановленном состоянии.

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

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

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

Edit:

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

Себастьян

Ответ 5

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

Шаги:

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

Вот демо:

enter image description here

Ответ 6

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

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

Ответ 7

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

Это возможно с firebug в firefox или встроенным инспектором в хроме.

Ответ 8

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