Home/ Questions/Q 6639129
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T23:31:05+00:00

I use the Google Chrome developer tools. When I want to inspect an element,

  • 0

I use the Google Chrome developer tools. When I want to inspect an element, I usually right click it and select “inspect element”. This doesn’t work for draggable helper clones. My code is as follows:

$myElement.draggable({helper: 'clone'});

How can I inspect the helper clone that is only created once I start dragging the element?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    1. Go to Script Sources tab
    2. In the right panel under Event Listener Breakpoints and under DOM Mutation choose DOMNodeInserted

    enter image description here

    3 . When a jQuery UI drag with clone helper happens a new DOM element inserted in DOM tree. This element would be last element before body end tag. then developer tool halt the document from operation because it have a breakpoint for insertion of a DOM element.

    4 . Now you can inspect the cloned element and edit the CSS or so…

    Note: It seems those breakpoints doesn’t work in Mac very well.

    enter image description here

    Try it here: http://jsbin.com/ijacet/2

    UPDATE:

    Now you can break on node insertion by right clicking on element:

    enter image description here

    • 0