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

Question

Я пытаюсь проверить структуру dom видеоплеера (например, плеера YouTube). Элементы Dom видны только тогда, когда мышь движется, и есть вложенные элементы, для которых требуются дополнительные события, такие как нажатие кнопки субтитров. Я не мог найти способ получить дочерние узлы HTML при перемещении мыши. Содержимое исчезает так быстро, прежде чем я осматриваю их.

Я пробовал состояния элементов, такие как активный фокус при наведении и т. Д., На каждом узле dom не работал. Насколько я понял, он обнаруживает событие перемещения мыши, когда мышь останавливает переключение элементов, однако я пытался отследить событие перемещения мыши на нескольких HTML-элементах. в консоли, и этот метод не переключал DOM-узлы.

Answer 1

Самый простой способ, который я нашел, это добавить скрипт, чтобы остановить выполнение js.

/* This will stop execution when we press F12 */
window.addEventListener('keydown', e => { if (e.keyCode === 123) debugger })

Answer 2

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

In Chrome Developer Tools

1. Перейти на вкладку Элементы
2. Щелкните правой кнопкой мыши элемент, который вы хотите отслеживать
3. Выберите «Break On ...», затем выберите «Изменение поддерева», или «Изменение атрибутов», или «Удаление узла»

Или вы можете просто навести курсор мыши на элемент и добавить точку останова, используя «Приостановить / возобновить выполнение сценария», используя следующие комбинации клавиш

1. F8 или Ctrl + \ (Windows)
2. F8 или Cmd + \ (Mac)