欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

1、Chrome之Elements功能面板

程序员文章站 2022-03-11 16:37:19
一、Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。Elements右侧面板功能说明如图Reveal in Sources panel:在Sources面板中展示,当在html中的js、超链接上右键时,才会有此选项Open in new tab:在新页签中打开,当在html中的js、超链接上右键时,才会有此选项Add attribute:添加属性Edit attribute:编辑属性Edit as HTML:编辑...

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

Elements左侧面板功能说明

如图

1、Chrome之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:当内部节点变化时触发断点,如添加、修改、删除

1、Chrome之Elements功能面板

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

1、Chrome之Elements功能面板

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

}

Expand recursively:递归展开

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

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

Focus:聚焦

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

1、Chrome之Elements功能面板

 Elements右侧功能面板说明

a.Styles

1、Chrome之Elements功能面板

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、Chrome之Elements功能面板

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

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

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

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

c.Event Listeners

1、Chrome之Elements功能面板

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、Chrome之Elements功能面板

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

e.Properties

1、Chrome之Elements功能面板

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

相关标签: Chrome使用