Inspect an element shown on hover

#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

#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

• In the Console, execute the following code:

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

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

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