一、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:展示详细的检查提示,勾选后定位元素会展示非常详细提示信息,不勾选后展示的提示则很少,不勾选的效果如下