Chrome：检查仅在拖动时出现的元素

Question

我经常想查看仅在拖动或单击鼠标（ mousedown事件）时出现的元素的样式。 如何使用 Google Chrome 的开发人员工具查看元素的样式？

Answer 1

打开开发者工具。

转到“来源”：

展开右侧的“Event Listener Breakpoints”：

在键盘部分为 keydown 事件添加一个监听器：

现在开始拖动你想要的东西，到时候按键盘上的任意键，你就可以检查可拖动元素。

Answer 2

您可以在拖动时简单地按F8 （并且开发人员工具已打开）

Answer 3

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

这将暂停拖动操作，以便您可以正常进行检查。

Answer 4

如果将来有人遇到这个问题，我有另一个解决方案。 这个解决方案与最受好评的答案有点相同，但它不需要任何按键，只需简单地拖动：

1. 打开 Chrome 开发者工具
2. 单击“来源”选项卡
3. 转到下面的事件侦听器断点
4. 在事件列表中，单击Drag / drop ，然后勾选dragover

之后，每当您开始拖动元素时，浏览器窗口都会暂停调试，然后您可以自由检查元素的 CSS 样式。

注意：我在Chrome 版本 80上对此进行了测试，但我认为它可以在旧版本中使用。

编辑：
刚才我发现拖动断点在某些情况下不起作用，例如，如果您想在拖动的项目到达另一个元素后检查样式。 对于这种情况，您可以尝试在Drag / drop 中指定的不同侦听器，例如drop 。

Answer 5

在代码中放置一个断点 - 在mousedown事件回调内部。

这将在您开始拖动时冻结应用程序，然后您可以在检查器的Element部分上按 Tab 键以像往常一样使用它，只是现在它在拖动开始时被冻结。

编辑：您应该将断点放在创建要检查的新元素的下方的一行上，以便在您冻结时元素位于 DOM 上。

// 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
});

Answer 6

一种方法是打开元素面板，然后在拖动时右键单击。 这将打开上下文菜单并“暂停”鼠标移动/悬停效果。 然后右键单击后，返回元素面板并使用查找功能搜索元素。

这也可以用于检查悬停效果（它比其他方法快）

这可以在这里进行测试，例如https://jqueryui.com/draggable/#visual-feedback

Answer 7

1. 从 DevTools 转到将包裹可拖动项的最低元素

2. 右键单击此元素并选择“存储为全局变量”，它将在控制台中称为temp1

   

3. 在控制台中写入此命令 - let myInterval = setInterval(() => console.log(temp1.cloneNode(true)), 1000)在此阶段，您可以在拖动它时在控制台中看到元素详细信息。

当您不再需要检查它时，请从控制台运行 - clearInterval(myInterval) 。

您可以运行以下命令而不是第 2 节，并使用适当的查询选择器选择可拖动元素 - let myInterval = setInterval(() => console.log(document.querySelector(/* your query goes here */)?.cloneNode(true)), 1000)