如何调试JS中鼠标悬停事件影响的元素？
在日常的前端开发中，我们经常要调试许多其他开发者写的网站和代码。此时我们往往会打开浏览器的开发者工具，在
Elements
,
Console
,
Network
,
Sources
,
Performance
等多个
Tab
之间来回穿梭。
今天笔者来分享一个
Chrome
调试技巧，来方便的调试JS中鼠标悬停事件影响的元素。
什么是鼠标悬停事件？
鼠标悬停俗称
hover
，它会在鼠标指针悬停在被选元素上时触发。一般前端开发会利用
css
中的
:hover
伪类选择器，来给被选元素应用不同的样式，从而增强用户的体验感。
最常见的例子就是
Button
按钮，鼠标移上去变个色:
Force element-state 的局限性
在
Chrome
中，我们可以通过
Force element-state
来强制设置元素的状态，以此来调试鼠标悬停
样式
影响的元素。
操作方式，即先在
Elements
中选中目标元素，然后在右侧的工具栏中，选择
Styles
标签，点开
:hov
，然后在
Force element-state
中选择对应的元素状态即可(
hover
)。
但是这种方式，往往只能调试一些
css
的伪类选择器，不能用来触发和调试
js
中的鼠标悬停事件。比如用
js
控制隐藏显示的
el-dropdown
下拉菜单就无法用此面板控制 (
Live Demo
)。
为了复现这个
case
, 我们写一段代码:
<template>
@mouseenter="visible = true"
@mouseleave="visible = false"
鼠标到这显示
</div>
<div v-if="visible">隐藏内容</div>
</div>