How to enable mouseenter/ mouseover state of an element for debugging purpose using developer tools?

Question

Is there anything similar to activating the hover state (CSS) for activating javascript events?

So I'm using Angular Materials tooltip. Everything works fine. I need to style the tooltip as per the theme but can't inspect the element as it's only visible when the mouse moves over the element.

https://material.angular.io/components/tooltip/examples#tooltip-custom-class The custom class works and I can change the color. I'd like to change the width and other CSS properties but I can't inspect the element to check what styles are getting applied by default.

So the main question is: Is there anything similar to activating the hover state (CSS) for activating javascript events (mouseover/mouseenter)?

Answer 1

A cool trick to capture mouseenter:mouseleave events:

1. Open the console (in the browser)then enter:

setTimeout(() => {debugger;}, 5000)

press enter and hover above the item after the time 5s you can debug/ style the element.

2. Open source tab in the browser then press F8