检查助手克隆答案

【问题标题】：Inspect helper clone检查助手克隆
【发布时间】：2011-11-24 07:39:01
【问题描述】：

我使用 Google Chrome 开发者工具。当我想检查一个元素时，我通常右键单击它并选择“检查元素”。这不适用于可拖动的助手克隆。我的代码如下：

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

如何检查仅在开始拖动元素后创建的帮助程序克隆？

【问题讨论】：

【解决方案1】：

转到脚本来源选项卡
在右侧面板中的 Event Listener Breakpoints 和 DOM Mutation 下选择 DOMNodeInserted

3 .当一个带有克隆助手的 jQuery UI 拖动发生一个新的 DOM 元素插入到 DOM 树中时。此元素将是 body 结束标记之前的最后一个元素。然后开发人员工具停止操作文档，因为它有一个用于插入 DOM 元素的断点。

4 .现在您可以检查克隆的元素并编辑 CSS 左右...

注意：这些断点在 Mac 上似乎不能很好地工作。

更新：

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

【讨论】：

哇。你是怎么把背景变成这样的黑色的？ :)
有一个 Custom.css 文件，您可以对其进行编辑。转到 C:\Users\||||USERNAME||||\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets 并编辑它。或者使用我正在使用的这个 css：gist.github.com/1249280
我已经按照你说的做了，但是开发者工具在拖动后确实会停止文档...
如果你不拖动克隆就不会发生。你到底想要什么？
我正在拖动元素！但是当我放开鼠标时，它像往常一样消失了。

【解决方案2】：

只需从拖动时触发的某些代码内部抛出异常 - 这将杀死在您释放鼠标按钮时擦除可拖动元素的 js，并在发生异常时将可拖动元素冻结在屏幕上的位置。

那么你就可以随心所欲地检查它了:)

简单的方法是当您尝试将元素放在可放置对象上时抛出异常，这就是我通常的做法。

【讨论】：

【解决方案3】：

据我所知，你不能。您可以（仅出于测试目的）显式克隆它，并将其附加到文档中。然后您可以像检查任何其他元素一样检查克隆。这样的事情可能会实现：

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

现在，克隆应该出现在文档正文的底部，并且您应该能够在 Inspector 模式下用鼠标选择它。

根据您要弄清楚的内容，这可能会或不会为您提供足够的信息来推断可拖动的自动创建的克隆会是什么样子。

【讨论】：

【解决方案4】：

jQueryUI 将创建可拖动项目的精确副本。因此，您不需要检查您拖动的项目，但您可以检查正在拖动的项目。

使用可拖动对象中的 appendTo() 选项，您甚至可以定义要放入可拖动对象的位置。 (http://jqueryui.com/demos/draggable/#option-appendTo)

手动执行此操作（因此将代码手动放置在您喜欢的容器中）您可以检查实际对象。

【讨论】：