1、Chrome之Elements功能面板

一、Elements：查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。

Elements左侧面板功能说明

如图

Reveal in Sources panel:在Sources面板中展示，当在html中的js、超链接上右键时，才会有此选项

Open in new tab:在新页签中打开，当在html中的js、超链接上右键时，才会有此选项

Add attribute:添加属性

Edit attribute:编辑属性

Edit as HTML:编辑Html

Delete element:删除元素

Copy:{

          Cut element:剪切元素

          Copy element:复制元素

          Paste element:粘贴元素

          Copy outerHtml:复制指定标签及标签内的所有元素

          Copy selector:复制选择器

          Copy JS path:复制js路径

          Copy styles:复制样式

          Copy XPath:复制xpath

          Copy full XPath:复制完整路径xpath，从html标签开始

}

Copy link address:复制链接地址

Hide element:隐藏元素

Force state：强制状态，可以强制某个元素变成对应的状态{

           :active:元素被激活时的样式，也就是鼠标按下时的样式

           :hover:鼠标悬浮时的样式

           :focus:焦点聚焦时的样式

           :visited:已点击过的样式

           :focus-within:元素本身或子类元素聚焦时的样式

}

Break on:DOM断点调试，当js尝试改变元素的时候，给元素添加断点就会被触发{

            subtree modifications:当内部节点变化时触发断点，如添加、修改、删除

              attribute modifications:当节点属性发生变化时断点

              node removal:节点移除时断点，常情况应该是在执行"parentNode.removeChild(childNode)"语句的时候使用此方式。此方式使用不多。

}

Expand recursively:递归展开

Collapse children:折叠子对象，与Expand recursively相反

Scroll into view:让当前的元素滚动到浏览器窗口的可视区域内。

Focus:聚焦

Store as global variable:存储为全局变量

 Elements右侧功能面板说明

a.Styles

1、Styles:样式

2、Filter:过滤，可以通过元素标签过滤，也可以属性过滤

3、Add new class:给元素添加新的class，如果有多个元素使用了相同的样式，我们只需配置class的样式，并且给对应的元素增加class属性即可。如title标签的字体和段落p的字体是一样的，那我们只需配置一个class，设定字体样式，且给title和p的标签添加class属性即可。

4、Force element state:强制状态，与左侧面板中右键的强制状态功能一致

5、Element Classes:选中元素后，点击.cls，则会定位到该class的样式，前提条件，该元素中必须包含class。

6、New Style Rule：配合Add new class使用自定义新的Style。

7、Style所在的文件

b.Computed

1、计算过的样式，选定一个元素后，能看到改元素的当前的样式。

2、展示box模型，且模型中的“-”是可以编辑的，可以对padding（内边距）/border（边界）/margin（外边距）进行调整。

3、展示选定元素所有样式，包括默认样式。

4、计算后的样式列表不可编辑，但是可以通过点击小箭头标记，跳至Styles页面编辑样式。 

c.Event Listeners

1、Ancestors:取消勾选后，只展示当前选中元素上的监听事件，勾选则展示当前元素及其父级元素上的监听事件。

2、Blocking:阻断监听事件，浏览器间的应用方式不一样，chrome可参考event.stopPropagation方法。

Passive:被动监听事件，可通过addListener()方法第三个参数设定，如果为false,则为冒泡传递，如果为true则为捕获传递，默认为false，如果三层元素层级都绑定了监听事件，捕获传递是从外层到内层依次触发，冒泡传递是从内层到外层依次触发。

注：Chrome主要利用该特性来优化页面的滑动性能，所以Passive Event Listeners特性当前仅支持mousewheel/touch相关事件 。

3、Framework listeners:很多框架、类库都封装了原生的事件，禁止 Framework listeners 可以查看事件在框架或类库的代码下的实现，而允许 Framework listeners 则可以深入框架或类库内部查看事件定义的代码

4、remove可以移除监听事件，点击链接可以跳至监听器调用位置。

d.DOM Breakpoints

1、左侧菜单中打了Breakpoints断点，则会在此处展示，取消前面的勾选，则左侧面板中断点也会消失。

e.Properties

1、Properties:属性，注意和Attribute的区别，Properties是指作为js对象的属性，Attribute是作为Html标签上的属性，Attribute的属性只能是字符串，并且Attribute的非自定义属性都会同步为js对象的Properties，修改Attribute的值会导致Properties的值发生变化，自定义Attribute则不会同步。

2、展示选中的元素作为js对象的Properties和方法。

3、表示js对象所具有的方法。

4、表示js对象所拥有的属性。

Web API 接口参考:https://developer.mozilla.org/zh-CN/docs/Web/API

Elements设置说明

a.点击Elements右侧的设置按钮，进入到设置页面

 

1、Show rulers：显示标尺，勾选后，定位元素时，页面上会展示标尺

 

2、Show user agent shadow DOM：显示用户自定义‘影子’DOM

Shadow DOM说明参考文档：https://my.oschina.net/1pei/blog/490706

3、Word wrap：自动换行

4、Show HTML commpents：显示html注释

5、Reveal DOM node on hover：悬浮显露节点，勾选后悬浮元素时，会自动定位到html代码处，不勾选则需要鼠标点击才会定位到该html代码处。

6、Show detailed inspect tooltip：展示详细的检查提示，勾选后定位元素会展示非常详细提示信息，不勾选后展示的提示则很少，不勾选的效果如下