是否可以在浏览器中冻结 DOM 以进行拖动调试？

Posted 2023-03-07

【中文标题】是否可以在浏览器中冻结 DOM 以进行拖动调试？

【英文标题】：Is it possible to freeze the DOM in browser for drag debugging?

【发布时间】：2021-01-18 07:57:58

【问题描述】：

我正在尝试调试 Angular CDK 拖动问题。该问题仅在拖动时出现，因此如果我可以在拖动时冻结 DOM，那就太好了。然后我想检查 DOM 以查找分析问题。

这在浏览器（例如 Firefox、Chrome）中是否可行？

【问题讨论】：

是的，在Sources -> Event Listener Breakpoints中启用相关事件：puu.sh/GyK3o/e52eb6c228.png

@wOxxOm 它是如何工作的？如果我选择 drag 和 dragstart 如果我拖动元素，则不会发生任何事情。

好的，现在我在 Firefox（之前是 Chrome）中尝试了它，dragstart 可以工作，但所有其他拖动事件都没有。似乎不可靠

我搞定了。鼠标滚轮事件也适用于 Firefox。我移动元素，然后滚动以触发断点。 ^^

@wOxxOm 请回答这个问题？您的评论帮助我解决了我的问题，所以我会接受它作为答案。

【参考方案1】：

感谢 @wOxxOm 在 cmets 中的提示。是的，应该可以为例如设置断点。 drag 和 dragstart 事件。

问题是那些断点不起作用。只有 dragstart 在 Firefox 中为我工作，但对于我的 DOM 调试来说还为时过早。但我使用 Firefox 中的 keyup 事件让它工作。我拖动元素，然后我按下键，然后触发断点。