站长

<h1 id="heading-0">调试鼠标悬浮元素？</h1>

<p><img src="https://img.blogweb.cn/article/67105dbd8a9d41379b57d858ee4e05b5.webp" loading="lazy" alt="调试鼠标悬浮事件">
-- <a href="https://blogweb.cn/link?target=https://element-plus.gitee.io/zh-CN/component/tooltip.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95" target="_blank" rel="nofollow noopener noreferrer">来源 Element-plus 的 tooltip 组件</a></p>
<h3 id="heading-1">如何找到 hover 后显示的元素</h3>
<p>打开调试面板，选中 <code>button</code>，记得关闭 <code>Event Listeners</code> 面板中的 <code>Ancestors</code>，这样可以剔除来源祖先 Dom 的绑定事件，只有自身绑定的事件。</p>
<p><img src="https://img.blogweb.cn/article/97108686cf7848fc987ee2327ddd4533.webp" loading="lazy" alt="调试鼠标悬浮事件"></p>
<p>点开 <code>mouseenter</code> 面板和 <code>mouseleave</code> 选项，如果有多个事件，通过点击 <code>Remove</code> 判断是绑定哪个事件。</p>
<p><img src="https://img.blogweb.cn/article/2f4e52701cf044af9187dfa3fe037f2d.webp" loading="lazy" alt="调试鼠标悬浮事件"></p>
<p>这里可以把 <code>mouseleave</code> 事件移除，就可以找到弹出的 <code>tooltip</code></p>
<p><img src="https://img.blogweb.cn/article/e2da4423eaa544ce82ed424b91e4d4e4.webp" loading="lazy" alt="调试鼠标悬浮事件"></p>
<p>当然这种办法，影响了后续的调试，值得注意的是 <code>firefox</code> 浏览器可以直接禁用。</p>
<h3 id="heading-2">最佳实践</h3>
<ol>
<li>打开 devtools 面板，hover <code>button</code></li>
<li>按下 <code>ctrl + shift + c</code>，抓取包含 <code>tooltip</code> 的 <code>Dom Node</code></li>
<li>最后一定要右键唤出菜单，然后就可以在 <code>element</code> 面板中找到对应的元素</li>
</ol>
<p><img src="https://img.blogweb.cn/article/2d57e0dfa3b04a5e8496a560c0c8caa9.webp" loading="lazy" alt="调试鼠标悬浮事件"></p>
<h1 id="heading-3">更多的话题</h1>
<h3 id="heading-4">如何快速调试 mouseenter 事件</h3>
<p>点开 <code>mouseenter</code> 绑定的函数，在 <code>handler</code> 属性上右键选择 <code>Show function definition</code> 选项
<img src="https://img.blogweb.cn/article/251c38032b6e4c2ea1658e5c67b7170e.webp" loading="lazy" alt="调试鼠标悬浮事件"></p>
<p>然后就会跳转到该函数定义的 <code>source</code> 位置，在下一行添加一个 <code>breakpoint</code> 就可以调试了</p>
<p><img src="https://img.blogweb.cn/article/1533930bbdab4c43a4d2b172d331ca86.webp" loading="lazy" alt="调试鼠标悬浮事件"></p>
<h3 id="heading-5">css 的 hover 怎么调试</h3>
<p>在选中的 <code>Dom Node</code> 上右键选择 <code>Force state &gt; :hover</code></p>
<p><img src="https://img.blogweb.cn/article/88dbf628bc9d4a2492c0b6f53923d38b.webp" loading="lazy" alt="调试鼠标悬浮事件"></p>
<p>或者在 <code>style</code> 面板点击 <code>:hov</code> 按钮选择</p>
<p><img src="https://img.blogweb.cn/article/c5f8e595a3f34dd2a17fbf44abe3b184.webp" loading="lazy" alt="调试鼠标悬浮事件"></p>

调试鼠标悬浮元素？--如何找到hover后显示的元素打开调试面板，选中，记得关闭面板中的，这样可以剔除来源祖先Dom的绑定事件，只有自身绑定的事件。点开面板和选项，如果有多个事件，通过点击判断是绑定哪个事件。这里可以把事件移除，就可以找到弹出的当然这种办法，影响了后续的调试，值得注意的是浏览器可以直接禁用。最佳实践更多的话题如何快速调试mouseenter事件点开绑定的函数，在属性上右键选择选项然