How to find out using Chrome Dev Tools which Event in JS changes the properties of an element?

Question

JavaScript

Recently changed properties in Twitter Bootstrap dropdown to open on hover (previously it was on click). But it turned out that there was still some code left that, when clicked, adds a property to the element,
"display: none;"
which is why the hovers do not work later. How to find the code responsible for adding this property?

Answer 1

If the style attribute changes inconsistently, or the class is replaced, then you can hang a breakpoint to change the attributes. Just right-click on the desired element in the tree, and select Break On/Attributes Modifications. Execution of the script will stop on any attempt to change the attributes of the element, and the call stack will be visible in the right column.

Answer 2

Put a breakpoint on the click and follow the order of execution.

Answer 3

you are doing something wrong,
here is a simple solution
example

Answer 4

You can select a DOM element in DevTools, select the EventListeners tab in the block on the right, select Selected Node Only in the filter - you will see a list of handlers attached to the element.