Chrome开发人员工具的使用-Elements页面

文章目录

Elements页面
查看页面中对应的html元素
Chrome的元素操作
- copy功能：
- force state功能：
- break功能：
- Store as global variable功能：
右边styles、computed、event listeners
- Styles页面
- computed页面
- Event Listeners页面
- DOM Breakpoints页面

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断点。