检查助手克隆 [英] Inspect helper clone

问题描述

我使用Google Chrome开发者工具.当我要检查一个元素时，通常会右键单击它，然后选择检查元素".这对于可拖动的辅助克隆无效.我的代码如下:

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?

推荐答案

1. 转到脚本 来源标签
2. 在右侧面板中的事件侦听器断点下和 DOM突变下，选择 DOMNodeInserted

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

3.当使用克隆帮助程序拖动jQuery UI时，会在DOM树中插入一个新的DOM元素.该元素将是body结束标记之前的最后一个元素.然后开发人员工具将文档暂停运行，因为它具有用于插入DOM元素的断点.

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.现在您可以检查克隆的元素并编辑CSS左右...

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

注意:看来这些断点在Mac中不能很好地工作.

在这里尝试: http://jsbin.com/ijacet/2

更新:

现在，您可以通过右键单击元素来中断节点插入:

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

这篇关于检查助手克隆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！