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

Question

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

Answer 1

打开开发人员工具.

转到"来源":

展开右侧的"事件侦听器断点":

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

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

Answer 2

您只需F8在拖动时按下(开发人员工具已打开)

Answer 3

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

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

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

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

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