Chrome F8/hotkey debugger breaking during a drag and drop operation

Question

In Chrome's web-developer tools one can break at any point by pressing F8.

Often times I would like to break and inspect an element during a drag and drop operation by pressing F8. This won't work however.

Is there a native Chrome-way shortcut without running a custom script?

Answer 1

No, devtools window has to be focused in order for keyboard shortcuts to work. While you're dragging an element, it is the dragged element that has the focus, not the devtools window. The best you can do is with a custom script.

Try setting a timeout in the console to trigger the debugger after 2s:

setTimeout(function(){debugger;}, 2000);

And then step out of that function.