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等。
来源：CSDN
作者：make_1998
链接：https://blog.csdn.net/make_1998/article/details/104060336