Debugging CSS during drag and drop [Chrome]

Note: You can probably do similar in other browser Dev Tools – I just haven’t checked yet, and despite it’s memory hogging, Chrome is still my dev browser of choice.

+1 to my colleague Dadu for showing me this neat interface hack.

Debugging CSS during drag and drop is a horrible pain – how in hell do you inspect something when the moment you let go of the mouse to get to the dev tools the state changes?

By mildly abusing an unrelated feature, we can freeze the application state, leaving our dragged element floating in space and burrow around the DOM to inspect the CSS classes and work out why everything doesn’t look quite as perfect as we would like (aka ‘horrible’).

Open Dev Tools, jump to the sources tab, and check out the Event Listener Breakpoints.

OH LOOK! There’s a Drag / drop event!
NO. Bad kitty. 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.

I 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.

Screen Shot 2016-09-15 at 11.23.58

Now, drag whatever you like, and at the appropriate moment hit any key.


Voila – 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.

Screen Shot 2016-09-15 at 11.48.17

Or, if you are a masochist, drill down through the DOM in the Elements panel. It’s up to you I suppose.

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

7 thoughts on “Debugging CSS during drag and drop [Chrome]”

  1. Yeah thanks !

    Useful for customize DnD plugin but Event Listener Keyboard doesn’t work with React Sortable Tree when I drop an element q.q

Leave a Reply

Your e-mail address will not be published. Required fields are marked *