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
本文地址：https://blog.csdn.net/LetsStudy/article/details/107249656