inspect-an-element-shown-on-hover.md

title	category	date	topics
Inspect an element shown on hover	Tip	2021-03-01 16:49:00 +7	DevTools

To inspect an element with Chrome DevTools, we usually right-click the element and choose Inspect from the context menu. However, it doesn't work with a dynamic element that is displayed when we hover on a given element. A JavaScript tooltip is a common example.

There are a few ways to inspect that kind of elements.

Trigger the mouseover event

• Right-click the original element, and choose the Inspect menu item
• Click the Console tab
• Fire the mouseover event by excuting the following code in the Console:

$0.dispatchEvent(
    new MouseEvent('mouseover', {
        view: window,
        bubbles: true,
        cancelable: true,
    })
);

$0 represents the current inspected element

It simulates the mouseover event that is supposed to happen when we hover on the original element.

Pause the script execution

• Open the Chrome Developer Tools, and click the Sources tab
• Hover on the target element, and click the F8 key
• Move the mouse over the target element
• Activate the Elements tab, and you will see the dynamic element shown up here

Use debugger

It's similar to the previous way.

• In the Console, execute the following code:

handler = (e) => {
    if (e.key === 'Enter') debugger;
};
document.addEventListener('keydown', handler);

Running debugger here will pause the script execution when we press the Enter key. Of course, you can replace it with other key.

• Hover on the target element, and click the Enter key
• The dynamic element is displayed and visible under the Elements tab

Once you don't want to monitor the dynamic element anymore, you can stop listening to the keydown event:

document.removeEventListener('keydown', handler);

Track subtree modifications

• Open the Chrome Developer Tools, and click the Elements tab
• Right-click the body element, and choose Break on > subtree modifications from the context menu

If the dynamic element, a tooltip for example, is generated in the parent element of the target element, then you should choose the parent instead of the body element

• Move the mouse over the target element
• You will see the dynamic element shown in the Elements tab