打开开发者工具。
转到"来源"：

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

在keyboard部分添加keydown事件的侦听器：

现在开始拖动你想要的东西，当它的时间按下键盘上的任何键，你就可以检查拖动元素。

您只需在拖动时按F8（开发者工具打开）

如果有人在未来遇到这个问题，我有另一个解决方案。这个解决方案是有点相同的最高投票的答案，但它不需要任何按键，只是简单地拖动：
1.打开chrome开发工具
1.单击源选项卡
1.转到下面的事件侦听器断点
1.在事件列表中，单击拖放，然后勾选拖动
之后，每当您开始拖动元素时，浏览器窗口都会暂停以进行调试，然后您可以自由地检查元素的CSS样式。
注：我在Chrome版本80上测试了这个，但我认为它在旧版本中有效。
编辑：
刚才我发现dragover断点在某些情况下是不起作用的，例如，如果你想在拖动的项目到达另一个元素后检查样式。在这种情况下，你可以尝试Drag/drop中指定的其他侦听器，例如drop。

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

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

1.从DevTools转到将 Package 可拖动项的最低元素
1.右键单击此元素并选择“存储为全局变量”，它将在控制台中被称为temp1

1.在控制台中写入以下命令-let myInterval = setInterval(() => console.log(temp1.cloneNode(true)), 1000)在此阶段，您可以在拖动控制台时看到元素的详细信息。
当您不需要再检查它时，从控制台运行-clearInterval(myInterval)。
您可以运行以下命令并使用适当的查询选择器-let myInterval = setInterval(() => console.log(document.querySelector(/* your query goes here */)?.cloneNode(true)), 1000)选择可拖动元素，而不是第2节

在代码中放置一个断点-在mousedown事件回调内。
这将冻结应用程序时，你开始拖动，然后你可以标签的Element部分的检查器使用它像你通常会，只是现在它冻结在开始拖动。
EDIT：应该将断点放在创建要检查的新元素的行下面，这样在冻结时这些元素已经在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
});

一种方法是打开元素面板，然后在拖动的同时右键单击。这会打开上下文菜单并“暂停”鼠标移动/悬停效果。然后右键单击后，返回元素面板并使用查找功能搜索元素。
这也可以用来检查悬停效果（它只是比其他方法快）
可在此处进行测试，例如https://jqueryui.com/draggable/#visual-feedback

除了@Davids的回答之外，值得一提的是，您还需要在代码中的某个地方添加一个eventlistener，或者只是在调用之前将其放在控制台中
示例：document.onclick=function(){};