Chrome开发人员工具的使用-Elements页面
文章目录
Elements页面
其实主要是针对我们网页页面的排布进行检查和调试。
查看页面中对应的html元素
Chrome的元素操作
那么我们选中了对应的元素之后，右击来看一下。
其中简单的我就不在详细解解释了，来说一些有平时不常见的吧。
copy功能：
那么里面都有些什么呢？
那么什么是Xpath呢？
其实就是XML路径语言，是用来确定XML文档中部分位置的语言。XPath基于XML的树状结构，提供在数据结构树中找寻节点的能力。Xpath使用路径表达式来选取XML文档中的节点或节点集。
XPath详细解释
force state功能：
我们先来说一下这个强制状态的作用是什么，强制状态就是说，你设置了伪类的格式，比如我们设置的是focus聚焦的，那么我们可能需要让其元素获得焦点才能显示focus设置的格式。但是我们可以使用强制状态让其直接显示focus设置的状态。不需要必须获得焦点。
例子：我对一个博客的标题设置了聚焦的格式：
现在我们使用强制状态让其显示focus时的状态：
那么我们接下来再来说一下这些伪类选择器的都是些什么？
:active ——元素被**时的样式，也就是元素按下的格式
:hover——鼠标悬停或划过的样式
:focus——获得焦点的样式（比如输入框通过tab获得光标，或触发该样式）
:visited——访问过链接之后的样式
:focus-within——元素本身，或子类元素获得焦点时的样式
break功能：
断点调试：就是当js尝试改变元素的时候，给元素添加断点就会被触发
Store as global variable功能：
选中元素，存储为全局变量（Store as global variable）就会在consloe（控制台）里面添加一个全局变量
然后在console中输入 monitorEvents(temp1) 会监视并打印出该元素的所有事件。这个时候你鼠标移动到该元素上，或者点击等，会发现console里面会显示你操作所触发处理的一系列事件
使用 unmonitorEvents(temp1) 停止记录事件。
使用 monitorEvents(temp1, [‘mouse’, ‘focus’]) 只记录某类型的事件。可以填 mouse, key, click, touch和control等。
右边styles、computed、event listeners
Styles页面
样式的展示，也是按照权重从高到底来展示的。
这个页面所涉及到的样式。我们来看一下，其中样式显示的意思：
其中不继承的意思就是不继承父元素的样式。另外其他的操作：
computed页面
此页面主要展示盒子模型的信息
Event Listeners页面
展示所有的事件
DOM Breakpoints页面
展示该Html页面中所设置的DOM断点。