Inspect helper clone

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 clon开发者_Go百科es. 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?

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

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.

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

UPDATE:

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

Just throw an exception from inside some code that is triggered while you are dragging - this will kill the js that erases the draggable element when you release the mouse button and freeze the draggable where it was on the screen when the exception occurred.

Then you are free to inspect it to your hearts content :)

The easy way is to throw an exception when you try to drop the element on a dropable, that's how i usually do it.

As far as I know, you can't. You could (for testing purposes only) clone it explicitly, and append it to the document. Then you could inspect the clone just like any other element. Something like this would probably accomplish that:

var tempElement = $myElement.clone();
tempElement.appendTo('body');

now, the clone should appear at the bottom of the document body, and you should be able to select it with your mouse when in the Inspector mode.

Depending on what you're trying to figure out, this may or not give you enough information to extrapolate what the draggable's automatically created clone would look like.

jQueryUI will create an exact copy of the draggable item. Therefore you don't need to inspect the item you drag, but you can inspect the item which is being dragged.

Using the appendTo() option in the draggable you will even be able to define a location at which the draggable will be put into. ( http://jqueryui.com/demos/draggable/#option-appendTo )

Doing this by hand (so placing the code there by hand, in the container in which you like) you can inspect the actual object.