开发小技巧之调试移开消失的元素

引言

    大多数小伙伴都遇到过一种调试情况,想调试页面中的某个元素,查看该元素的样式或者其他信息。鼠标移上去的时候或者点击的时候存在,移开就消失了,以至于不能用选择页面元素工具查看。今天就来整理一下什么功能会出现这种情况,以及该如何调试这种情况的元素。

伪类

最常见的也是最普通的情况就是伪类,其中:hover , :focus是最常见的,很多菜单就是通过这两种伪类做的下拉悬浮,最不易察觉的样式是:focus 伪类选择器中的样式。 比如chrome中元素获取焦点的样式

在这里插入图片描述

仔细看的话会发现,input输入框在获取焦点时有个默认的outline 外边轮廓,而图片中选择的div.content在勾选上focus伪类选择时也出现了一个蓝色的outline 外边轮廓。 正常情况下div.content 是无法获取焦点的,所以我们很少见到,但是input 输入框我们经常见到,有很多新手不知道这个默认的outline,想把这个样式修改又不知从何修改,而这里的-webkit-focus-ring-color 指的是chrome 获取焦点的颜色变量,从样式计算结果可以看到这个颜色值是rgb(77, 144, 254)

比如github的登录页输入框就用了:focus 伪类选择器设置了输入框的box-shaodw:spread(阴影的大小)。

在这里插入图片描述

之前在StackOverflow 上也碰到过有人问像上面提到的样式怎么去掉,其实只要知道了这个样式是获取焦点时才出现,勾选上调试窗口的:focus伪类选择就能知道这个样式的具体信息了。

:focus伪类选择类似的:hover伪类选择也一样,只是触发的条件由获取焦点换成了在元素上悬浮,失去焦点消失变成了移开元素消失,调试这种情况也只需要勾选上调试窗口的:hover伪类选择就行。其他伪类选择也是一样,勾选对应的选择就行。

在这里插入图片描述

增删className

通过事件驱动,给DOM增删className控制样式,比如百度网盘的下拉菜单。

在这里插入图片描述

这里在div.g-dropdown-button这个DOM上增删了.button-open 这个className,用.g-dropdown-button.button-open>.menu选择器控制了.menu这个DOM的展示与隐藏,对于这种情况还是比较容易调试的,因为这里只是控制了DOM的隐藏和显示,DOM还是一直存在与document之中的,想更改样式还是比较容易的。

增删DOM

调试DOM最麻烦的就是这种,通过事件驱动,对触发的事件创建或者删除对应的DOM,比如一个下拉菜单,移动到按钮上,触发mouseenter事件,然后创建了一个下拉框的DOM,移出这个下拉框,触发mouseleave事件,删除了这个下拉框DOM,这个时候想要调试更改这个下拉框的样式就比较麻烦,因为移开DOM就被实时删除,无法查看这个DOM的样式,更没法调试更改样式,举个例子。

在这里插入图片描述

由于没找到网上例子,目前只找到移入创建DOM,移出不删除的例子,待会儿下面手写一个功能再看,现在这里可以看到移入button 标签时,在document中body标签内最下方创建了一个tooltip提示的DOM,这里很多新手不知道怎么查看以及更改tooltip提示的样式。在移出button未删除的情况下根据提示内容在文档中搜索一下就能找到,但是移出button就删除对应的DOM的情况下就需用用到debugger(断点)调试的方式了,debugger因为可以中断js进程,所以移出button之前进入debugger 就能用调试器更改DOM的样式了。

只需要在 Consle 下,用一个计时器 setTimeout(() => { debugger }, 2000)延时进入断点就好,时长根据页面操作复杂度自行决定,先执行这个计时器,再移到页面中触发事件,弹出临时创建的 DOM,只需等待进入断点即可,最后再调试。

下面用断点调试法尝试解决以上谈到的问题

在这里插入图片描述

这里就写了一个移入按钮创建提示的DOM,移出就删除。例子可以很明显的看到,移动到测试按钮上创建了一个.test-class的DOM,移出测试按钮就删除 .test-class这个DOM,因为移出就没办法调试,所以使用上诉提到的办法,用计时器延时进入断点,进入断点后可以看到,再次移出测试按钮.test-class这个DOM不会消失,这样就可以使用样式调试工具,更改样式了。

总结

总的来讲,页面调试只要掌握了规律,其实很容定位,不同浏览器对样式的解析有较多差异,如何在不同浏览器上写出相同呈现效果的页面,调试是必不可少的一部分,希望每一位同学都能熟练的调试DOM。

以上如有疏漏或错误,欢迎指正。