谷歌浏览器调试工具使用—Elements

谷歌浏览器调试工具使用—Elements

Elements是谷歌调试工具中第一个功能，它主要针对页面元素样式的调试，可以观察到元素在页面中具体所在位置以及被影响的样式列表，事件绑定，DON断点等一系列功能。并且可以在页面中直接修改样式元素和内容，页面是可以直接根据修改的内容作出及时的反应的。

学会使用他，对于布局的查看和调试，bug查找是有很多帮助的，而且也会减少很多不必要的代码修改>保存>刷新>看效果的繁琐过程。本文会针对elements中最常用功能和技巧作出介绍，能在实际的布局练习中获取便利。

1. 打开方法

跟调试工具的整体打开方式一样，可以直接用快捷键F12（英文键上方）打开。但是这种方式不会指定你想查看页面中某一个部分的样式，所以我们可以选用最方便的方式，把鼠标放置你想查看的元素上面，右击鼠标，点击检查，这样elements就会自动定位的你鼠标所在的元素位置

image.png

当然万一出现有在你想查看的元素上面有覆盖的元素或者页面某些特殊内容是无法查看到的（比如video，一般的网站都会在这个元素之上禁止使用右击菜单），这些情况可能无法直接检查定位元素的位置。那么我们可以在工具内用快捷键搜索到你想找到的元素—组合键ctrl + F

image.png

比如我们想知道这个video在页面中的代码位置，我们在输入框内输入video，当然这种搜索会把所有带有video这个名字的class名称，ID名称都会搜索出来，如果不是你想要的，按enter（回车键）切换至下一个带有video的元素位置，直到找到为止，这个过程一般不会很长。

第一次搜索，不是想要的结果，按回车切换。

image.png

回车之后目标元素找到啦！

image.png

以上就是通过各种方法找到自己想查看元素代码的方法了。看到自己想要调试的元素之后这是第一步，接下来就开始分析这个元素。

2. 元素查看及其盒子模型

如果细心的在调试工具中找到自己想要查看的元素之后，鼠标放置到这个元素代码之上，你会发现这个元素在页面中所在的区域会发生有区别与其他内容的颜色变化

image.png

这样其实你就知道了你指定的元素在页面中的位置了，并且在左下角还会有该元素的像素大小和元素的id，class，标签的名字

image.png

当然，这么看并不代表什么，主要还是看样式，能够影响这个元素的样式在调试工具代码区域的右边，栏目中有style的部分。

image.png

在这个栏目中所显示的样式就是影响这个元素的所有样式都在这里了。如果有一定CSS基础的应该看得出来，右边有很多选择器的样式，这里面所有正常显示的样式，都是对于页面是生效的。这些样式也有一点区别

2.1 浏览器默认样式

我们在样式之前，经常要先清除浏览器默认样式，那么怎么查看这个样式是否是浏览器的默认样式了？

之前说过，在style栏目中所显示的就是这个影响这个元素的所有样式，将这个栏目的内容往下面翻就可以看到一个类似于这样的样式

image.png

仔细看看右边圈出来的部分是该选择器内的样式的来源，例如图上中first-scree...chunk.css:1，它的意思是该样式来自于first-scree...chunk.css这个样式文件，后面的冒号:1，意思是这个样式来自这个文件的第一行。当然这个地方可以点击的，点击之后调试工具就会跳转到这个样式所在的文件并且显示。

只不过这里有一个比较特殊的来源，就是一个名字叫做 user agent stylesheet 的样式，它翻译成中文是用户代理样式表，这里的用户代理其实就是浏览器了，也就说这个部分的样式就是来自于浏览器的默认样式表了，这个时候你就可以查看这个元素有哪些默认样式，一般需要清除的默认样式是内外边距。某些特殊的元素，例如ul，需要清除的是列表样式，还是需要根据实际情况来。

2.2 关于样式选择器

2.2.1 行内样式

在观看这个章节时，希望你能够对于CSS的选择器有一定的了解，知道其作用即可，至于选择器优先级，有哪些种类，这些无需记忆，因为在调试工具内是可以分辨出来的。

image.png

如图所示，红色框框部分就是该元素样式了。除了一些基本的后代选择器，类选择器和id选择器之外，我们需要关注一个特殊的地方

element.style{

}

这个部分现在是空的，这个内容是代表元素的行内样式。也就是说如果元素内出现如下行内样式，在element.style中就会出现元素内的行内样式

element.style{
    color: red;
}

2.2.2 伪类选择器

还有一种特殊情况就是伪类选择器了，例如:hover的元素，在一般情况下，是查看不到的，我们需要点击一个在style栏目上方中的 :hov

image.png

勾选中后，我们就会看到该元素所拥有的:hover样式了，并且在元素区域还会出现如下标志

image.png

它的意思是在所在行元素触发:hover的动作，页面也会做出反应，直接显示:hover的样式。

image.png

这里面的所有伪类是都可以勾选调试的

PS: 勾选伪类的只会在拥有伪类的元素的时候才会出现，如果你所查看元素没有直接的hover选中，是无法查看到的

2.3 样式属性以及属性值

2.3.1 样式属性的显示

值得注意的一点，style栏目中所显示的所有样式并不都是生效的，注意生效的样式是没有任何特殊的显示的。例如

image.png

所有正常显示的，都是有效样式，但是如在样式上方出现横杆的，说明该样式是无法生效的。例如：

image.png

这种情况出现的元素是因为选择器优先级不够高的原因，在其他选择器中一定可以找到一个一样的样式

image.png

2.3.2 样式错误的显示情况

对于新手来说，编辑样式经常会出现样式属性，或者值写错的情况。一旦属性或者值写错，生效时不可能的，而且在这个无效样式前会出现一个黄色感叹号三角形。

image.png

如果鼠标停留在这个三角形上面，就会有一个标语出现 Unknown property name 或者 Invalid property value

image.png

image.png

翻译过来分别是属性错误，无效的属性值。出现这个提示，说明开发者的代码是实实在在的写错了！

2.3.3 关于继承

样式的继承是子级元素会继承父级元素的某些样式，但并不是所有样式都会继承，一般来说，只有修饰文本的样式才会具有继承性。当然啦，对于一个前端7秒鱼来说，背这些样式是不可能的，一辈子也不可能的。通过调试工具可以轻松的知道被继承样式有哪些。在我们style栏目的最最最下方，如果该元素有被继承样式，就会出现这个子栏目

image.png

Interited form 翻译过来是继承的意思，后面的li.fore2就是所继承的样式了，正常显示的是被继承的样式。而哪些样式是没有被继承的了？

image.png

这个background-color颜色有没有发现比较淡，只要是颜色很淡的，说明它就是一个不可被继承样式了。也就是说，只有正常显示的样式才具有继承并且对元素起作用，其他时候是毫无作用的。

3. 样式与元素的调试

这个功能可以说是最实用的功能了，它会让你直接脱离编辑器调试，拜托繁琐的修改 > 保存 > 刷新的过程。在elements调试功能中，是允许开发者在工具中直接修改样式以及元素，并且是会及时响应的。

3.1 样式的修改

修改样式只需要选中你所需要修改的元素，然后找到自己想修改的样式，鼠标光标移动到样式的数值部分，点击一下一下你想修改的数值，回车或者失去光标焦点之后，样式值则会生效。

image.png

并且，工具还会对于你所修改的样式值作出有效值提示，你可以在下拉列表里面修改其样式，浏览器会立马生效。

如果需要修改某一个数值的样式，只需要让样式数值获得焦点之后，按住上下键就可以数值渐渐增调试，而且页面是立马响应。

PS: 上键和下键是在回车键的下方的方向键

3.2 元素的修改

修改元素方法跟样式的修改类似，鼠标移动到修改元素之上，双击元素（不要点到链接，例如a标签的href中通常都是链接，点击后会直接跳转），就可以进行修改了。一般来说修改元素一般是修改元素的属性或者属性值。在元素内修改完毕后回车就可以生效了。

image.png

以上就是elements栏目中最常用的功能，在实际的开发中，合理运用调试工具，会对你代码的检查效率大大提高！从此，妈妈再也不担心我出bug了。

当然了，这些经验都是作者经验之谈，待后续学习JavaScript之后，会有更多调试工具的教学，无论是调试，检查，断点，测试等，后续还会有一整个利息。但是，方法归方法，一定要自己试用一下哦，相信你会依赖上他的

PS: 居然不支持GIF 难受