Inspect hovered element in Chrome?

Question

I am trying to view, through Chrome\'s developer tools, how tooltips are structured on a site. However, even when I am hovered over the item, when I \"inspect element\", not

Answer 1

Worth noting that toggling the :hover state from within the dev tools only has an impact if the hint text is enabled via CSS :hover rules in the first place. The toggle only applies the hover state to the element for rendering purposes, but does not trigger a corresponding JavaScript mouseover event.

Many frameworks such as AngularJS dynamically attach tooltip HTML to the bottom of the document body via JavaScript when a target element is hovered, so any amount of hovering and inspecting the target element won't help.

@joeyyang's answer worked very well for me in this scenario.

Answer 2

F8 will pause debugging.

On Mac, you may need to have the 'Sources' tab of the developer tools open.

Mouse over the tooltip, and press F8 while it is displayed.

You can now use the inspector to look at the CSS.

Answer 3

Click f12 go to the console tab and add the following:

setTimeout(()=> {debugger},5000)

This will give you 5 seconds to do whatever you want and it will break at 5 seconds. Then you can inspect the target element

(ex. hover the element and wait 5 seconds then inspect..)

Answer 4

Another Solution I found for this problem. Through Mobile or Tablet view in Chrome press Crt + Shift + M in Chrome Dev tools for Mobile view in Chrome. Click(Tap) on ToolTip div and you can inspect it with Right Click on tooltip

Answer 5

Hit command-option-j to open the console. Click the window-looking button on the top right corner of the console to open the console in a different window.

Then, in the Chrome window, hover over the element that triggers the popover, hit command- however many times you need to focus on the console, then type debugger. That'll freeze the page; then you can inspect the element in the Elements tab.

Answer 6

For me, the accepted answer didn't work: clicking in DevTools immediately closed the ToolTip.

However, I found https://superuser.com/questions/249050/chrome-keyboard-shortcut-to-pause-script-execution which helped me:

1. In the console:, Run:

    const F12 = 123
    window.addEventListener('keydown', function(event) { 
      if (event.keyCode === F12 ) {
        debugger; 
      }
    });

2. Highlight element with inspector

3. Hit F12

You can now inspect the element, with JavaScript paused so the DOM won't change.