调试鼠标悬浮元素？

-- 来源 Element-plus 的 tooltip 组件

如何找到 hover 后显示的元素

打开调试面板，选中 button，记得关闭 Event Listeners 面板中的 Ancestors，这样可以剔除来源祖先 Dom 的绑定事件，只有自身绑定的事件。

点开 mouseenter 面板和 mouseleave 选项，如果有多个事件，通过点击 Remove 判断是绑定哪个事件。

这里可以把 mouseleave 事件移除，就可以找到弹出的 tooltip

当然这种办法，影响了后续的调试，值得注意的是 firefox 浏览器可以直接禁用。

最佳实践

1. 打开 devtools 面板，hover button
2. 按下 ctrl + shift + c，抓取包含 tooltip 的 Dom Node
3. 最后一定要右键唤出菜单，然后就可以在 element 面板中找到对应的元素

更多的话题

如何快速调试 mouseenter 事件

点开 mouseenter 绑定的函数，在 handler 属性上右键选择 Show function definition 选项

然后就会跳转到该函数定义的 source 位置，在下一行添加一个 breakpoint 就可以调试了

css 的 hover 怎么调试

在选中的 Dom Node 上右键选择 Force state > :hover

或者在 style 面板点击 :hov 按钮选择