How to inspect an element which only exists if the mouse is at specific position

Question

If you need to inspect a hover state of an element it can be done as described here The problem is that you loose the state if you move the mouse.

In my case its javascript providing the visual effect on hover. So, basically the issue is the same as described above, but the solution does not apply.

If you go to: http://volkshotel.nl/ and move your mouse over a button/link you'll see a nice glitch effect. But hard to inspect. I've extracted a button

<span class="buzz">
    <span class="buzz-original-text">Show me the way</span>
    <span class="buzz-container"></span>
</span>

Now if the glitch effect is applied somethings happens inside the buzz-container element, but it seems not possible to inspect that element. Is there some way inside Chrome to inspect it ?

Answer 1

You can set the element state in Chrome DevTools:

If you want Chrome to break on your event-listener you can set this in the sources tab:

In your case you can now step through the code until the element you want to inspect is created (F11 once) resulting in:

<span class="buzz-container"><span class="buzz-wrap" style="width: 109px; transform: translate(-0.631288939155638px, 0px);"><span class="buzz-target" style="transform: translate(0px, 0px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(0.245302784256637px, 2px);"><span class="buzz-target" style="transform: translate(0px, -2px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(-1.24612329155207px, 4px);"><span class="buzz-target" style="transform: translate(0px, -4px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(1.63969129044563px, 6px);"><span class="buzz-target" style="transform: translate(0px, -6px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(1.5060622766614px, 8px);"><span class="buzz-target" style="transform: translate(0px, -8px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(0.929074209183455px, 10px);"><span class="buzz-target" style="transform: translate(0px, -10px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(0.889030547812581px, 12px);"><span class="buzz-target" style="transform: translate(0px, -12px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(1.0943416710943px, 14px);"><span class="buzz-target" style="transform: translate(0px, -14px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(0.936934390105307px, 16px);"><span class="buzz-target" style="transform: translate(0px, -16px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(0.647303706966341px, 18px);"><span class="buzz-target" style="transform: translate(0px, -18px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(0.526725108735263px, 20px);"><span class="buzz-target" style="transform: translate(0px, -20px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(0.622202496044338px, 22px);"><span class="buzz-target" style="transform: translate(0px, -22px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(-1.97411663923413px, 24px);"><span class="buzz-target" style="transform: translate(0px, -24px);">Eat &amp; Drink</span></span></span>

Answer 2

If you're using Chrome DevTools (don't know about other browsers) you can use an event listener breakpoint.

Go to the Sources tab of your DevTools, expand the Event Listener Breakpoints section to the right, expand Mouse and check the mouseover box.

Then, put the mouse over your link: the debugger will stop in the JavaScript function that modifies the style of your link. Press F10 until you reach the end of that function: your link now has its style changed and you can inspect it as you like in the Elements tab.

Answer 3

You are using JavaScript to handle mouse over events. One possible way to debug the problem is to use JavaScript to trigger the event.

1. You can locate the element using the magnifying glass icon in element inspector if right-click > inspect element does not work
2. Use used $(element).trigger("mouseover") to fire the mouseover event
3. If necessary, remove the mouseout event handler using `$(element).off("mouseout")

You can then inspect the result. In your example the hover event seems to add some CSS classes to the element.

Answer 4

Maybe just use Javascript to dump it to the console? For example, with JQuery...

$( "#element" ).mouseover(function(e) {
  console.log(e);
});

For your particular problem maybe something like this (untested!)

$( ".buzz" ).mouseover(function(e) {
   $(e.target).find('.buzz-container').each(function(idx, child){
       console.log(child);
    });
});