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();
    }
);

Pekingese

Right click on element node in inspector -> Force element state -> hover – Markowitz

This is a good question without a good answer. It should have more votes. – Fulfil

Answer 1

Take the below snippet of a menu which shows a dropdown on hover:

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

#menu {
  width: 100px;
  background-color: #03f;
  color: #fff;
  padding: 2px 5px;
}
#dropdown {
  width: 100px;
  background-color: #03f;
  color: #fff;
  padding: 2px 5px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="menu">menu</div>
<div id="dropdown">
  <ul>
    <li>menu item 1</li>
    <li>menu item 2</li>
    <li>menu item 3</li>
  </ul>
</div>

Copy this snippet into a local document, as Chrome Dev Tools will not allow you to use Javascript to select any element in this iframe. Then, in your Dev Tools Console, run:

$('#menu').trigger('mouseover');

This will show the dropdown menu, which has a really ugly, unstyled list. Now, instead of using your mouse to right-click the element and selecting "Inspect Element", which I would imagine is how your're used to doing things, run in your Console:

$('#dropdown');

Or whatever selector for whichever element you want to style/manipulate. The Console will show the result of your statement, which is the relevant jQuery object. Now right click on that object in your Console and select Reveal in Elements Panel. Now you can use the Styles tab as you're used to, and your mouse has never triggered the mouseout event, ending the hover.

Anisaanise

Answer 2

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

Scripts can also be paused with ctrl+\ (or ⌘+\ on mac)

Midriff

very handy and with a single key press! – Drayman

Although Chrome on OS X claims that F8 would do the trick, it also showed command-\ (backslash) as another key combination for the same thing. Only command-\ worked for me. – Zodiac

Note that it only works if you are in the "Sources" tab of the DevTools while you press F8. – Foredate

I figured out a similar method for Firefox and outlined the steps here: https://mcmap.net/q/395532/-inspect-javascript-hover-in-chrome-developer-tools – Kermes

Answer 3

Open dev tools by pressing F12 and click the toggle element state in the top right corner. Here you can activate the hover state

Update: You can trigger the hover/mouseover/mouseenter events on say it's click event:

$("#menu").click(function() {    
    $(this).trigger("mouseover");    
    $(this).trigger("hover");    
    $(this).trigger("mouseenter"); 
});

Tracytrade

This only works with CSS I am looking for a solution that works with Javascript please. Thanks – Pekingese

See Edit to orig. post – Tracytrade

I amended so the function is triggered by a different element because it did not work - due to the hover hiding it when moving mouse off element. I also would like to mention this code can not be added in the Chrome Dev Tools Console. Ideally this is where I can test the hover. – Pekingese

Answer 4

What worked for me:

At chrome dev tools Elements tab:

1. Right click on a parent of the element that changes on hover
2. Choose Break on -> subtree modifications
3. Inspect the relevant child elements while the browser is paused on the relevant subtree modification.

Betray

That is exactly what I was looking for – Incorporable

Answer 5

Per the other answers, you can pause JS execution via the DevTools shortcuts; however, you need to focus on the DevTools window for this to work. If you need to pause without focussing on the DevTools window, you can bind a debugger statement to a keypress event like so:

document.addEventListener('keydown', e => { if (e.keyCode == 123) debugger; })

Running this snippet in the console will add a listener which pauses the code execution when you press F12.

Grandaunt

Answer 6

I know this might sound weird but you can do this with keyboard "Tab" button.

Press F12 ->Inspect the element -> hover over the element -> leave the mouse(!important) -> press "tab" till you reach style section of the element ->press "Enter" to start editing the style tags-> use "tab" to move through the style section.

Dix

Answer 7

While @missemm 's answer is the most straightforward, another useable option in Chrome is (with the dev tools panel already open) trigger the menu, then right click on the element you want to inspect and choose 'View Page Source' option from the Dev Tools menu. This opens another window and removes the focus from the window you were inspecting, so if the menu is listening for a pointerout event it won't be triggered. Just close the Page Source tab and as long as you keep your mouse clear of the original window viewport, the menu will stay open, but you can still use the dev tools panel.

This is sometimes more convenient if you normally need to press 'fn' and 'f8' at the same time (which is a stretch to do one-handed).

Mcclung

Answer 8

It is also possible with plain javascript:

my_elem = document.getElementById('menu')

const mouseoverEvent = new Event('mouseover');

my_elem.dispatchEvent(mouseoverEvent);

reference answer

Dispread

Answer 9

Firefox Method

The method describe in the top answer is also possible in Firefox but it is a little more finicky.

• Open Firefox Devtools to the Debugger tab
• Without losing focus of the Devtools window/panel hover the element
• Press F8

You should now be able to look at the element in the Inspector tab.

If you want to find an element with the DOM Element Picker tool, you will need to do the following:

• In Dev tools press ctrl+shift+c
  • Note: do not click on picker icon with your mouse
• Now you should be able to select the element that shows up when hovered

As mentioned this method is finicky and extra mouse clicks on the webpage tend to break the spell.

Kermes

Note: This was tested in Ubuntu 22.02LTS Firefox 123.0.1 – Kermes