Chrome Developer Tools无法检查点击即关弹窗的HTML 求可行解决方案

下面是4种可实现完整调试的可行方案，都可以避免弹窗提前关闭的问题：

方案1：修改DevTools停靠模式避免窗口失焦 #

• 先不要触发弹窗，打开Chrome DevTools，点击右上角三个点的设置按钮，在「停靠边侧」选项中选择停靠到窗口左/右/底部，不要使用独立窗口模式。
• 调整DevTools的停靠占比，留出足够的页面空间正常显示弹窗，触发弹窗后可直接在同窗口的DevTools中检查DOM结构、样式、绑定事件，不会触发窗口失焦导致弹窗关闭。

方案2：定时器触发调试暂停保留弹窗状态 #

• 如果你手速跟不上弹窗关闭的速度，可以提前在DevTools的Console面板执行代码：setTimeout(() => { debugger; }, 3000)
• 执行代码后3秒内触发弹窗，定时器时间到后页面会自动进入调试暂停状态，所有页面交互都会冻结，弹窗不会被关闭，直接切到Elements面板即可进行完整调试。
• 熟悉快捷键的用户也可以在触发弹窗后立刻按下F8（Mac系统为Cmd + \、Windows/Linux系统为Ctrl + \）手动触发调试暂停。

方案3：临时禁用外部关闭的事件监听 #

• 打开DevTools的Elements面板，选中<body>或者<document>节点，在右侧的「Event Listeners」面板找到绑定的click、mousedown、focusout相关事件监听器，临时移除和弹窗关闭相关的监听逻辑。
• 之后触发的弹窗就不会因为点击外部或者窗口失焦关闭，调试完成后刷新页面即可恢复原有逻辑。

方案4：DOM变化断点自动捕获弹窗插入 #

• 提前在DevTools的Elements面板中找到弹窗会被插入的父容器节点（绝大多数场景为<body>节点）
• 右键该节点，依次选择「Break on」→「subtree modifications」（子树修改），之后只要有新的DOM节点（即弹窗的HTML代码）被插入到该节点下，页面会自动触发断点暂停，弹窗的完整DOM、样式、事件都会被保留，可直接进行全量调试。

你之前尝试的右键快速复制DOM的方案只能拿到静态HTML结构，无法调试动态交互、样式变更和绑定事件，上述所有方案都支持完整的调试需求。
你提到的不足以解决问题的方案参考示意图：

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