Как узнать с помощью Chrome Dev Tools какой Event в JS меняет свойства элемента?

Question

[naneri]

Недавно поменял свойства в дропдауне Twitter Bootstrap, чтобы они открывались по ховеру (раньше было по клику). Но оказалось что остался ещё какой-то код, который при клике добавляет элементу свойство
"display: none;"

из-за чего потом уже ховеры не работают. Как найти код отвечающий за добавление этого свойства?

Answer 1

[Алексей]

Если меняется непоследственно аттрибут style, или заменяется класс, то можно повесить breakpoint на изменение атрибутов. Просто нажать ПКМ на нужном элементе в дереве, и выбрать Break On/Attributes Modifications. Выполнение скрипта будет останавливаться при любой попытке изменить аттрибуты элемента, и в правой колонке будет виден стек вызовов.

Answer 2

[Илья Лесных]

Поставить на клик breakpoint и проследить за порядком выполнения.

Comments

[naneri]

я поставил остановку на клик, но не могу понять в каком месте показываются события

Answer 3

[Сергей Мельников]

вы что-то делаете не так,
вот простое решение
пример

Comments

[naneri]

Как сделать дропдаун я знал, проблема в том, что какой то евэнт на этот дропдаун добавляет display:none прям в HTML при клике на любую ссылку. Из-за этого свойства в css перестают работать.

Answer 4

[Максим Ходырев]

Можете выбрать DOM элемент в DevTools, в блоке справа выбрать вкладку EventListeners, в фильтре выбрать Selected Node Only - увидите список обработчиков, навешанных на элемент.