Emulate JavaScript events with developer tools?

Question

Chrome (and Firefox) both have really awesome tools for changing the current state of an element, e.g. setting it to a hover state so you can examine/modify css:

The problem is that this doesn't seem to set off any JavaScript events.

I'm currently trying to style a tooltip, which is shown on hover. It's difficult to hover over the element manually as the tooltip dissapears when I take the mouse off of said element, and setting the state to hover in the developer tools doesn't seem to set off the jQuery events.

I'm having to resort to adding an ID on the element in the developer tools inspector, then doing the following in the console:

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

Which feels wrong (and is a little cumbersome).

Is there a better way to do this that I don't know about?

Answer 1

In a simple situation I think it is often easier to use the console as you are doing. But within developer tools, you can also find the event listener code and set a breakpoint on it:

You then right click on this handler and do view source, unminimize the source with the {} button and set a breakpoint in this handler function.

If this handler function triggers on unrelated events then you may need to right click on it and make the breakpoint conditional or add Watch Expressions to see when you are at the correct event.

You could also use the same method of breakpoint setting to instead skip over a particular mouseout event.