Chrome：检查仅在拖动时显示的元素

Question

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

Answer 1

打开开发人员工具。

转到＆＃34;来源＆＃34;：

展开＆＃34;事件监听器断点＆＃34;在右边：

在键盘部分添加keydown事件的监听器：

现在开始拖动您想要的东西，当它按下键盘上的任何键时，您将能够检查可拖动元素。

Answer 2

您只需在拖动时按socket.setReuseAddress(true);（并且开发人员工具已打开）

Answer 3

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

这会在您开始拖动时冻结应用程序，然后您可以选中检查器的Element部分以像往常一样使用它，只有现在它才会在开始时冻结阻力。

编辑：您应该将断点放在创建要检查的新元素的下面一行上，这样在冻结时元素就会出现在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 4

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

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

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

Answer 5

万一将来有人遇到这个问题，我有另一种解决方案。此解决方案与最受好评的答案有点类似，但是它不需要任何按键，只需拖动即可：

1. 打开chrome devtools
2. 点击来源标签
3. 转到位于下方的事件监听器断点
4. 在事件列表中，单击拖放，然后在拖放
上打钩

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

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

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

Answer 6

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)