mouseover， mousedown才顯示時dom的查看

在現實研發過程當中，咱們常常須要藉助chrome Devtool 查看頁面的dom節點。但有的時候比較難找，常常被困擾者。
本篇文檔就是對其中兩個狀況提供一下好的建議。

1. 咱們常常會這麼寫：會給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了

1. 還有一種狀況，咱們在鼠標按下去（mousedown）時顯示dom節點，在鼠標鬆開（mouseUp）時隱藏dom節點，此時想查看這個dom節點也比較難。
   

這個時候經過上面的這個方案也能夠解決哦。

1. ps：一個知識點--在chrome DevTool 的source下面的文件夾下，能夠右擊能夠全局搜索