Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 352
Lorenz Lo Sauer Avatar asked Jun 02 '15 09:06

Lorenz Lo Sauer


People also ask

How do you debug drag and drop?

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.

How can I stop Chrome from going into debug mode?

Go to the "Sources" tab. At the top right hand side, toggle the button that looks like the pause symbol surrounded by a hexagon (button on the far right) until the color of the circle turns black to turn it off. If the pause symbol isn't blue it may be that you've accidentally marked a line for debugging inspection.

How do you inspect a dragged element?

Open the developer tools. 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.


3 Answers

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.

like image 147
ArtBIT Avatar answered Oct 21 '22 08:10

ArtBIT


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);
like image 27
Drakes Avatar answered Oct 21 '22 10:10

Drakes


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

like image 3
Sahil Jalan Avatar answered Oct 21 '22 10:10

Sahil Jalan