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

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?

google-chromedebuggingdrag-and-dropgoogle-chrome-devtools


Solution 1:[1]

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

Solution 2:[2]

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. Chrome Webtools Event Listeners
  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

Solution 3:[3]

Open dev tools and click f8 -> Open Dev Tools, jump to the sources tab, and check out the Event Listener Breakpoints -> click keyboard checkbox, something like below

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Wojciech Zylinski
Solution 2 Sahil Jalan
Solution 3 Arun Yadav

Related Questions