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

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);

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.