查看mouseover和mousedown时的dom

时间：2023-04-02 14:28:20 HTML

在实际开发过程中，我们经常需要使用chromeDevtool来查看页面的dom节点。但有时更难找到，他们常常为此烦恼。本文档就是为其中两种情况提供一些好的建议。我们经常这样写：mouseover和mouseout这两个事件会被添加到dom节点上。当鼠标悬停在节点上时，显示一个dom节点，离开时该节点消失。这个时候就比较难看出这个dom节点的样式了。解决方法：（1）找到当前页面绑定mouseover事件的代码。(2)事件执行完后打断点。(3)再次执行时会停在断点处，页面也会显示隐藏的dom。这个问题可以在这个时候查看。代码示例：

运行截图：通过查找事件绑定的代码EventListener并打上代码，然后执行代码，可以查看dom还有一种情况，我们在鼠标按下（mousedown）时显示dom节点，松开鼠标时隐藏dom节点（mouseUp)，此时也很难查看dom节点。这时候上面的解决方案也可以解决。ps：一个知识点——在chromeDevTool源码下的文件夹中，可以右键全局搜索。欢迎关注小站小滑轮。小站是日常工作中积累的一些小工具。你在工作中是否也遇到过？也可以在博客下方留言小站内容。如果你想让我添加你使用的任何工具，你也可以留言。