Elements(元素)

2019-02-28 10:00:26
linefo
504
最后编辑:linefo 于 2019-08-28 15:36:04




顾名思义,Elements面板主要和HTML元素相关,主要可以显示和处理元素相关的内容。

我的命名比较随意,不要在意这个。


1、左边区域


左边区域显示HTML代码结构。


(1)标识元素位置

鼠标放到HTML某个元素的代码行上,会在页面标识出它显示的位置(蓝色块,其他颜色标识内外边距等信息),还有一些其他信息。


(2)查看元素层次

点击某个元素,下方会显示其和父级元素的层级关系。层级关系按图中红色箭头的方向,左边为右边的上一级元素。

PS:这个对写js的元素选择器很有帮助。


(3)修改实时预览

修改HTML可以实时预览,点击选中某个元素按F2即可进入编辑模式。

另外也可以使用双击元素的某个位置,此时是一种自动判断修改位置的情况,只能修改某一个属性这样。


(4)右键菜单说明


在元素点右键,弹出菜单。


Add attribute:顾名思义添加一个属性

Edit as HTML:编辑HTML元素,效果等于按F2

Delete element:删除元素

Copy:复制,有扩展选择可以实现不同的复制效果。

(Cut element是剪切元素,Copy element是复制元素,Paste element是粘贴元素【和前两个配合使用】,copy otherHTML是复制HTML,Copy selector是复制选择器【一般从id开始】,Copy JS path是复制js的路径,Copy XPath是复制xpath路径)

Hide element:隐藏元素

Force state:强制元素状态,比如像 :hover 这样的样式难触发,可以在这里强制元素状态为 :hover ,这样便于查看效果。这里的操作和在右侧的Styles选项卡中,调出 :hov 选项卡来操作一样的。

Break on:设置元素的DOM操作的断点调试。

(subtree modifications是子节点被改变时,attribute modifications是属性被改变时,node removal是节点被删除时,直接在Element面板处理元素时是触发不了,需通过js操作触发)

Expand recursively:展开元素下的所有子元素,子元素有折叠内容时,其也会被展开。

Collapse children:收起元素下的所有子元素,不包括收起当前元素。

Scroll into view:在网页中,滚动到元素所在视图位置

Focus:元素获得焦点,像Input元素这种就可以看到效果

...........................................................



2、右边区域


右边区域也有选项卡:


(1)Styles


元素相关样式的显示,这个是最主要的。


整体介绍

如下面大的这张图:



在左边区域点击某一个元素后,右边区域的Styles面板则开始显示该元素的相关样式

滑到最下面还有一个盒模型,和之后Computed介绍的那个盒模型是一样的东西,就不放出来了。

这里会列出所有对这个元素造成影响的样式,绿色箭头表示继承顺序,从下到上(越上面优先级越高)。

红圈部分代表这块样式写在哪个文件里面,点击会跳到sources面板打开这个文件。

我们可以直接修改某块样式,以实时预览,如下面这张小图所示。前面的小框可以开启/关闭该行样式。点击属性名或属性值都可以对其进行修改,而对于数字类型的属性值 ,除了输入外,我们还可以使用滚轮或者键盘的上下键进行改动。

在属性后面空白部分进行单击,可以添加一行新的属性,如下图:

element.style这里可以直接写元素的style,一般我们对元素有新的css属性都会写在这里。写入后会直接反应在左边区域的HTML代码中。


关于Filter:

在输入框输入内容可以直接进行过滤(这个过滤是给黄色的高亮显示,而不是隐藏其他内容)。


关于:hov选项卡

右边的:hov是选择是否强制显示伪类(:hover这些)的状态;和上面描述的右键菜单 Force state 的作用一致。


关于.cls选项卡

然后.cls是可以选择该元素的哪几个类起效,在判断某个class的影响效果时非常有用;

比如下面我们可以通过勾选不同的类来查看元素的效果,也可以“Add new class”来加一个新的类(输入后立即有效,但要固定效果下来需要回车把它加到下面可勾选的选项中),从而查看新的类对元素的效果。


关于+

增加一个临时的样式,该临时样式会进入一个名为inspector-stylesheet的临时样式文件中。

然后你可以为当前页面的任意元素去使用增加的临时样式。

一个类名为test2的临时样式

在Sources面板中打开的inspector-styleshee临时样式文件内容:


关于颜色选择器

点击颜色的小方块可以呼出颜色选择器


关于其他的可视化样式调整器

每个样式块右边都有一个三点的“额外样式工具”按钮,放在上面会出现下面的几个按钮,从左到右分别为:

Add text-shadow(文字阴影):

Add box-shadow(边框阴影):

Add color([文字]颜色):

Add background-color:

界面和上面的一样

Insert Style Rule Below:

往inspector-stylesheet的临时样式文件中加入样式规则,和上面说的 + 按钮的逻辑一致。element.style的样式块没有这个按钮。


(2)Computed


显示元素盒模型(记得这里的颜色划分,蓝色表示内容部分,绿色padding,border是黄色,margin是橙色)


margin、border、padding的值可以直接在这里编辑,和在Styles选项卡中修改其属性值的效果一样


这里应该是看最终影响元素的css属性。(猜测)

Filter这个输入框用来做过滤。


(3)Event Listeners



(4)DOM Breakpoints


应该是断点相关的,这个我还不懂,先不管。


(5)Properties



(6)Accessibility