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下面的文件夹下,可以右击可以全局搜索

原文链接:segmentfault.com

上一篇:rollup-worker
下一篇:respawn

相关推荐

  • 🚩Vue源码——组件如何渲染成最终的DOM

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue有两个核心思想,一个是数据...

    1 个月前
  • 高性能JavaScript之DOM篇

    本篇文章主要分享一下操作DOM时的一些细节,来提高页面性能。 首先我们来思考以下几个问题。 1.如何获取页面中所有class为div1和div2的div元素。 2.你了解HTMLCollection和...

    1 年前
  • 高性能JavaScript DOM编程(1)

    我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵。有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用...

    4 年前
  • 面试官问:如何利用 random 计算 π

    前言 这是基友面试 RingCenter 时被问到的一个题目 表面上考察的是概率论等基础知识,实际可能还会问到事件循环等底层知识,以及 React Fiber 蒙特卡洛法求 π 说蒙特卡洛可能不太理...

    5 个月前
  • 附backbone.js观点存在与插入到DOM元素的EL

    Ben Roberts提出了一个问题:attaching backbone.js views to existing elements vs. inserting el into the DOM,或许...

    3 年前
  • 重学前端学习笔记(二十三)--狭义的文档对象DOM

    笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的...

    1 年前
  • 那些年,那些坑--swiper loop:true引发绑定dom的click事件无效及解决方案

    对于 swiper,只要做过轮播图的童鞋应该都再熟悉不过了。这是一个很强大的图片轮播插件,本身无任何第三方库依赖,即插即用。api 文档很清晰,所以很快能够上手。但是,再好的插件也会出现令人不愉快的地...

    2 年前
  • 邂逅react(八)-虚拟DOM

    一直听说虚拟dom这个概念,虚拟dom到底是什么,下面我们一起探索,揭开这层神秘的面纱~~~react中React.createElement形成的js树就是虚拟dom class App ext...

    4 个月前
  • 通俗易懂的vue虚拟(Virtual )DOM和diff算法

    最近在看一些底层方面的知识。所以想做个系列尝试去聊聊这些比较复杂又很重要的知识点。学习就好比是座大山,只有自己去登山,才能看到不一样的风景,体会更加深刻。今天我们就来聊聊Vue中比较重要的vue虚拟(...

    3 个月前
  • 还记得那些年你修改过的 DOM 吗

    ⭐️ 更多前端技术和知识点,搜索订阅号 JS 菌 订阅 框架用多了,你还记得那些操作 DOM 的纯 JS 语法吗?看看这篇文章,来回顾一下~ 🤔 操作 className addClass 给...

    1 年前

官方社区

扫码加入 JavaScript 社区