Chrome: Inspect elements that appear only when dragging

Question

I often want to view the styles of an element that appears only when dragging or when the mouse is clicked (mousedown event). How can I view the element's style using Google Chrome's developer tools?

Answer 1

Open the developer tools.

Go to "Sources":

Expand "Event Listener Breakpoints" on the right:

Add a listener for keydown events on the keyboard section:

Now start dragging the thing you want, and when it's time press any key on your keyboard and you'll be able to inspect the dragable element.