Chrome: Inspect elements that appear only when dragging

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?

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.

You can simply press F8 while dragging (and developer tools is open)

In case anyone encountered this question in the future, I have another solution for this. This solution is kinda same with the most upvoted answer, but it doesn't require any keydown, just simply drag:

1. Open chrome devtools
2. Click on the Sources tab
3. Go to Event Listeners Breakpoints down there
4. Om the event list, click Drag / drop, then tick dragover

After that, whenever you start to drag an element, the browser window will pause for debugging, then you can inspect the element's CSS styles freely.

Note: I tested this on Chrome version 80, but I think it works in older version though.

Edited:
Just now I figured out dragover breakpoints doesn't work in certain condition, e.g., if you want to inspect styles after the dragged item reached another element. For that situation, you may try different listeners as specify in Drag / drop, such as drop.

dragMethod() {
  setTimeout( () => {
    debugger;
  }, 500)
}

This will suspend the drag action so you can proceed to inspect as normal.