Inspect Javascript Hover in Chrome Developer Tools

Question

I have some Javascript which displays an element on hover. I want to style this element and therefore need to trigger the hover state in the browser using Chrome Dev Tools.

This is easy to do with CSS where you can set the state of an element within Dev Tools. What is the best way to do this with Javascript?

Code Example:

$('#menu').hover(     function() {         console.log('test');         $('#dropdown').show();     },      function() {         $('#dropdown').hide();     } ); 

Answer 1

Another alternative would be to hover over the element with your mouse and press F8 (this will only work in Chrome) to pause the script execution. The hover state will remain in visible to you.