mouseover-mousedown才显示时dom的查看

jiezi

6 年前

在现实研发过程中，我们经常需要借助 chrome Devtool 查看页面的 dom 节点。但有的时候比较难找，经常被困扰者。
本篇文档就是对其中两个情况提供一下好的建议。

我们经常会这么写：会给 dom 节点上添加两个事件 mouseover 和 mouseout, 当鼠标悬浮节点时，显示某个 dom 节点，离开时这个节点消失。此时想看这个 dom 节点的样式就比较困难。

解决的方案：（1）找到当前页面绑定 mouseover 事件的代码. (2)在事件执行之后打一个断点。（3）再执行时，就会停在断点处，页面也会显示隐藏的 dom。此时就可以查看这个问题。
代码事例：

<div id="first" style="width:100px; height:100px; background: red">
</div>
<div id="second" style="width:100px; height:100px; background: #00A0FF; display: none"></div>
</body>
<script src="http://lib.eqh5.com/jquery/2.0.3/jquery.min.js"></script>
<script>
    $('#first').on('mouseover', () => {$('#second').show();});
    $('#first').on('mouseout', () => {$('#second').hide();});
</script>

操作截图：
通过 Event Listener 找到事件绑定的代码

对代码进行打点，然后再执行这个代码，就可以查看 dom 了

还有一种情况，我们在鼠标按下去（mousedown）时显示 dom 节点，在鼠标松开（mouseUp）时隐藏 dom 节点，此时想查看这个 dom 节点也比较难。

这个时候通过上面的这个方案也可以解决哦。

ps：一个知识点 – 在 chrome DevTool 的 source 下面的文件夹下，可以右击可以全局搜索