如何在拖拽时激活breakpoint调试droppable区域占位符闪烁问题

可行调试方案如下： #

方案1：使用DOM变更断点（最适配该场景）

占位符闪烁本质是对应DOM节点被频繁增删、样式变更，直接通过DOM断点捕获变更动作：

• 打开Chrome DevTools的「Elements」面板，定位到droppable区域的根DOM节点
• 右键该节点，选择「Break on」→ 勾选「Subtree modifications」（子树变更）和「Attribute modifications」（属性变更）
• 先点击DevTools顶部的「停用断点」按钮（划斜杠的六边形图标），此时断点不会触发，可以正常完成按住拖拽、移动到droppable区域边缘的前置操作
• 到即将触发闪烁的位置时，立刻切回DevTools点击「启用断点」，后续只要占位符相关DOM发生变更就会触发断点，此时调用栈完整，可直接定位到操作DOM的对应业务代码。

方案2：通过全局开关控制debugger触发

避免断点提前打断拖拽状态：

• 先在控制台执行 window.enableFlickerDebug = false
• 在所有疑似和拖拽占位符渲染相关的逻辑（比如dragover回调、占位符插入/移除逻辑）中插入代码：if (window.enableFlickerDebug) debugger;
• 正常执行拖拽操作，到即将触发闪烁的瞬间，切到控制台执行window.enableFlickerDebug = true，后续进入相关逻辑就会自动断住，不会提前打断mousedown拖拽状态。

方案3：用Performance录制直接定位调用栈

无需断点即可快速定位问题：

• 打开DevTools的「Performance」面板，点击录制按钮
• 立刻执行拖拽操作复现完整的闪烁过程，结束后停止录制
• 在性能时间轴上找到闪烁对应的时间区间，查看该区间内的JS调用栈，即可直接看到高频执行、触发DOM变更的函数，定位效率比断点更高。

补充说明：之前通过setTimeout设置断点无法拿到有效调用栈，是因为setTimeout属于异步宏任务，回调的执行上下文和触发闪烁的DOM操作上下文完全隔离，因此无法回溯到问题代码，不推荐使用该方案。

拖拽占位符闪烁效果参考：

内容的提问来源于stack exchange，提问作者Muhammad Kamal