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.

Answer 2

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

No. Without any extra steps the DevTools must be in focus for F8 to pause execution.

---

If you'd like to call debugger while DevTools is open but not in focus, you can attach an event listener for the F8 key in a couple ways. These will work when you are dragging an element and you want to pause script execution.

1) Open the console and manually run this script on the target site before debugging:

window.addEventListener('keydown', function(e){ if(e.key === 'F8') {debugger;} }, false);

This will attach an event listener for the F8 key which will trigger debugger.

2) Create a userscript for Tampermonkey which runs the above script on sites that you permit. Sample userscript:

// ==UserScript==
// @name         F8 to debug
// @version      0.1
// @description  Press F8 when the console is open to trigger 'debugger'
// @author       Drakes
// @grant        none
// @require      none
// ==/UserScript==

console.log("Press F8 when the console is open to trigger 'debugger'");
function KeyCheck(e) {
    if(e.key === 'F8') {
        debugger;
    }
}
window.addEventListener('keydown', KeyCheck, false);

Answer 3

I do have a better solution without changing anything on the code. Below trick is valid on Chrome Webtools, and for others I haven't checked.

Steps to put debug on drag and drop or even on any event of your choice

1. Open Dev Tools, jump to the sources tab, and check out the Event Listener Breakpoints
2. You would see Drag / drop event! but before going further. Stop there. If we use this, we’ll get a breakpoint on the very moment a drag/drop event is called. We don’t really want that right
3. we want to pause the UI state at a moment of my choosing, perhaps while dragging over a particular element. So instead of drag/drop, check the Keyboard event box.
4. Now, drag whatever you like, and at the appropriate moment hit any key from the keyboard.
5. Finally we got one paused state. You can’t right click to inspect elements, but you can use the element selector tool - hit the button top left of the Dev Tools pane, or [Cmd/Ctrl] + [Shift] + [C] and point at the element you want to inspect.

NOTE: Don’t forget to uncheck the Event Listener Breakpoint when you are done