Эмуляция событий JavaScript с инструментами разработчика?

Question

У Chrome (и Firefox) есть действительно потрясающие инструменты для изменения текущего состояния элемента, например. установив его в состояние парения, так что вы можете проверить/изменить CSS:

Проблема заключается в том, что это, кажется, не засчитывать событий JavaScript.

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

мне приходится прибегать к добавлению идентификатора на элемент в инспекторе инструментов разработчика, а затем, выполнив следующие действия в консоли:

$("#custom-element-hover").mouseover(); 

Что чувствует неправильно (и это немного громоздким).

Есть ли лучший способ сделать это, о котором я не знаю?

Answer 1

В простой ситуации, я думаю, что часто проще использовать консоль, как вы делаете. Но в инструменты разработчика, вы также можете найти код слушателя событий и установить точку останова на нем:

Вы затем правой кнопкой мыши на этот обработчик и сделать источник просмотра, unminimize источник с помощью кнопки {} и установить точка останова в этой функции обработчика.

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

Вы также можете использовать тот же метод настройки точки останова, чтобы вместо этого пропустить определенное событие mouseout.

Answer 2

Я могу поделиться с тем, что я делаю в таких ситуациях. Я открываю вкладку элементов в хром-отладчике и правой кнопкой мыши на целевом элементе. Тогда я выбираю «Копировать CSS путь»

Если вы сделаете это, вы получите что-то вроде этого

#mdhelp-tabs > li:nth-child(1) 

И эта строка на самом деле может быть использована в качестве legimit селектора для JQuery. Таким образом, это

$("#mdhelp-tabs > li:nth-child(1)") 

даст объект jquery с целевым элементом dom в нем.

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

Answer 3

Я не уверен, но вы можете использовать консоль для обработки TOOLTIP