如何在DevTools选中调试一个实时交互才能显示的元素样式

常见的会消失元素

如果你对下列的元素该如何在浏览器调试过程中选中有问题，那就继续看下去吧。

通过设置伪类(:hover、:focus 等) 来控制显隐的元素
设置了动画的元素
通过一些事件(鼠标移入移出、点击、聚焦、触发键盘按键等)控制的元素
- 在 css 层面控制，通过在一些事件触发时给特定元素设置类样式
- 在渲染层面控制，通过一些事件触发控制该元素是否渲染（是否在 DOM 树中）

通常这些元素是动态显隐的，且较有实时性，同时还参杂着用户的交互行为，所以当我们需要在浏览器对该元素的样式之类的进行调试时，如何选中该元素就成问题了。

场景及解决方案

在 Element-plus 的 tooltip 组件中

从控制台中我们可以看到，tooltip 提示框的显隐是通过 v-if 来控制，当我们鼠标移入时，元素被渲染，移出时元素被移除。在这种情况下，我想要选中 tip 弹出框就变得不那么容易了。

通过移除事件

遇到这种问题，我们可以想到的是从它的内部实现去入手了，可以得知的是，tooltip 组件的 tip 是通过监听鼠标事件来完成了，所以一开始可以想到的办法是通过移出其鼠标事件的方式来完成。通过查看该按钮的事件列表，找到其 mouseleave 事件，并将其删除。

此时我们就可以选中该元素了

通过设置 DOM 变动断点

在 chrome 中可以对 DOM 元素的一些变化进行断点调试，我们可以在 Elements 选项卡中右键元素，有一个 Break on 选项，Break on 可以让你在 JS 修改某个 DOM 元素时，自动暂停代码执行（进入调试），并且告诉你是哪个 JS 操作改动了 DOM。其有三种类型，分别是：

Subtree modifications：子元素有新增、删除、顺序改变等
Attributes modifications：元素属性变化（包括 class、id、style 等）
Node removal：元素本身被删除

我们知道触发 debugger 会暂停 JS 执行，动画、交互、JS 驱动的渲染则会暂停，直到你手动继续调试。

利用 Break on 的功能我们就可以在断点期间对我们想要的元素进行选中调试了。

通过控制台 debugger;

除了通过设置 DOM 变动断点的来暂停页面获取元素外，我们还可以通过手动 debugger 的方式进行暂停页面操作。

上例中我们使用了 setTimeout(()=>{debugger;},3000) 设置了一个 3s 的 debugger 定时器，在这 3s 中我们只需要做到元素出现的交互就可以了，等触发了 debugger 页面停住后就可以对我们需要的元素进行选中调试了。

利用这种 debugger 的方式可以选中大部分会消失的元素包括伪类、动画、js 控制的元素。

总结

在我们前端开发中，调试那些由 :hover、动画或 JS 事件控制的动态显示元素是一个常见场景。Chrome DevTools 提供了多种技巧来"冻结"页面状态，从而允许我们检查这些稍纵即逝的元素。

1. 利用 DevTools 强制状态 / 伪类

对于由 CSS 伪类控制的元素（如 :hover, :focus, :active, :visited 等），这是最直接、最简单的方法。

操作：
1. 在 Elements (元素) 选项卡中，选中触发动态显示的父元素或目标元素。
2. 点击 Styles 面板右上角的 :hov（Toggle Element State）按钮。
3. 勾选相应的伪类（例如 :hover）。
效果： 浏览器将强制该元素保持在指定的伪类状态，使其保持可见和可检查。

2. 通过设置 DOM 变动断点（针对 JS 移除 DOM）

当元素是通过 JavaScript 事件（如 mouseleave 或计时器）从 DOM 树中移除时，此方法特别有效。

操作：
1. 找到即将被删除或修改的父元素 （例如 tooltip 的外部容器）。
2. 在 Elements (元素) 面板中，右键点击该元素，选择 Break on (断点) 。
3. 选择 Node removal (节点移除) 或 Subtree modifications (子树修改) 。
效果： 当 JS 代码尝试删除或修改该 DOM 元素时，执行会暂停，页面状态被冻结，您可以在 Sources 面板中查看调用栈并检查 Elements 状态。

3. 使用 `debugger;` 命令冻结页面（较为通用的方法）

这是最通用的方法，适用于任何由 JS 控制显隐的元素，包括那些使用 v-if 控制渲染的场景。

操作：
1. 在 Console (控制台) 中，输入一个延迟执行的 debugger; 命令，例如：
  
  JavaScript
  javascript 复制代码
```
setTimeout(() => { debugger; }, 3000); // 3秒后暂停
```
2. 在定时器生效的这段时间（3秒内），执行触发元素出现的交互动作（例如鼠标移入）。
3. 当计时器结束，debugger; 被执行，页面将立即暂停并进入调试状态。
效果： 整个页面的 JS 执行（包括动画、计时器和事件监听）都会停止，元素被"定格"在当前状态，您可以轻松地在 Elements 面板中选中它并进行样式调试。

参考来源：Freeze screen & inspect disappearing elements