如何在DevTools中查看点击即关闭的DatePicker日历弹窗元素

以下是Chrome/Edge浏览器下的几种实用解决办法：

• 暂停JavaScript执行

  1. 打开DatePicker日历弹窗，保持弹窗显示状态
  2. 按F12打开DevTools，切换到Sources面板（或直接按Ctrl+Shift+I打开后按F8）
  3. 点击面板顶部的「暂停脚本执行」按钮（或按F8），此时页面JS会暂停运行
  4. 回到Elements面板，放心展开目标DIV的子元素即可——因为JS暂停，点击外部的关闭逻辑不会触发

• 禁用弹窗关闭相关的事件监听

  1. 打开日历弹窗后，在Elements面板找到弹窗的父DIV元素
  2. 切换到右侧的Event Listeners标签，找到click事件（或mousedown等可能触发关闭的事件）
  3. 找到绑定在document或body上的事件委托（通常是弹窗关闭的触发逻辑），点击事件条目旁的复选框取消勾选，禁用该监听
  4. 此时展开DIV元素时，关闭逻辑不会被触发

• 使用DOM断点阻止弹窗关闭

  1. 在Elements面板选中弹窗的父DIV元素
  2. 右键点击该元素，选择Break on -> Subtree modifications
  3. 尝试展开DIV元素，此时DevTools会触发DOM修改断点，自动暂停JS执行
  4. 保持暂停状态即可查看子元素的样式和结构，若需继续操作可点击「单步跳过」按钮逐步执行

内容的提问来源于stack exchange，提问作者gene b.