CODEWITHSUNDEEP
javascriptgoogle-chrome
Leo Jiang
Leo Jiang

Reputation: 26085

Chrome: Inspect elements that appear only when dragging

I often want to view the styles of an element that appears only when dragging or when the mouse is clicked (mousedown event). How can I view the element's style using Google Chrome's developer tools?

Upvotes: 66

Views: 21432

Answers (9)

WestMountain
WestMountain

Reputation: 625

You can run this code inside the console, then draging and wait for the callback function to run

(()=>{
    setTimeout(()=>{
        debugger
    }, 5000)
})()

Upvotes: 1

jewe
jewe

Reputation: 31

In addition to @Davids answer, it might be worth mentioning, that you need to add a eventlistener somewhere in your code as well or simply put it in the console before

Example: document.onclick=function(){};

Upvotes: 0

URL87
URL87

Reputation: 11012

  1. From the DevTools Go to the lowest element that will wrap your draggable item

  2. Right click this element and chose "Store as global variable" it'll be referred to from the console as temp1

    enter image description here

  3. Write in the console this command - let myInterval = setInterval(() => console.log(temp1.cloneNode(true)), 1000) At this stage you can see the element details in the console whem you drag it.

When you don't need to inspect it any more run from the console - clearInterval(myInterval).

Instead of section 2 you can run the follow command and select your draggable element with the appropriate query selector - let myInterval = setInterval(() => console.log(document.querySelector(/* your query goes here */)?.cloneNode(true)), 1000)

Upvotes: 1

Andy Tan
Andy Tan

Reputation: 61

In case anyone encountered this question in the future, I have another solution for this. This solution is kinda same with the most upvoted answer, but it doesn't require any keydown, just simply drag:

  1. Open chrome devtools
  2. Click on the Sources tab
  3. Go to Event Listeners Breakpoints down there
  4. Om the event list, click Drag / drop, then tick dragover

After that, whenever you start to drag an element, the browser window will pause for debugging, then you can inspect the element's CSS styles freely.

Note: I tested this on Chrome version 80, but I think it works in older version though.

Edited:
Just now I figured out dragover breakpoints doesn't work in certain condition, e.g., if you want to inspect styles after the dragged item reached another element. For that situation, you may try different listeners as specify in Drag / drop, such as drop.

Upvotes: 6

unloco
unloco

Reputation: 7320

One way of doing it is to open the elements panel then right click while dragging. This opens the contextual menu and "pauses" the mouse move/hover effect. Then after right clicking, go back to the elements panel and search for the element using the find feature.

This can also be used to inspect hover effects (it's just faster than other methods)

This can be tested here for example https://jqueryui.com/draggable/#visual-feedback

Upvotes: 1

Austin
Austin

Reputation: 203

dragMethod() {
  setTimeout( () => {
    debugger;
  }, 500)
}

This will suspend the drag action so you can proceed to inspect as normal.

Upvotes: 5

Moshe Shaham
Moshe Shaham

Reputation: 15984

You can simply press F8 while dragging (and developer tools is open)

Upvotes: 31

David Antunes
David Antunes

Reputation: 1759

Open the developer tools.

Go to "Sources":

Sources tab

Expand "Event Listener Breakpoints" on the right:

Event Listener Breakpoints

Add a listener for keydown events on the keyboard section:

enter image description here

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.

Upvotes: 153

Andrew Templeton
Andrew Templeton

Reputation: 1696

Put a breakpoint in the code - inside of the mousedown event callback.

This will freeze the app when you begin dragging, and then you can tab over the the Element section of the inspector to use it like you normally would, only now it's frozen at the beginning of the drag.

EDIT: You should put the breakpoint on a line below where the new elements you want to inspect are created, so the elements are on the DOM by the time you freeze.

// Raw event
someElement.addEventListener('mousedown', function(ev) {
  // Put a breakpoint on any of the lines in here
}, false);

// jQuery for prudence
$(someSelector).on('mousedown', function(ev) {
  // Put a breakpoint on any of the lines here
});

Upvotes: 0

Related Questions