Chrome DevTools — Elements

im, 无色
im, 无色
im, 无色
884
文章
0
评论
2019年7月4日09:06:03 评论 664

一、编辑DOM

查看元素

  • 页面上的任意元素,在其上面右键,选择“Inspect"

Chrome DevTools — Elements

  • 在Elements面板上,用鼠标手动选择某个DOM节点
  • 点击审查元素按钮,然后去页面上选择DOM

Chrome DevTools — Elements

  • 在console里面使用inspect(dom)查看某一元素

导航DOM节点

使用鼠标 >>>
1.在DOM节点上单击一次,高亮此节点
2.展开一个节点:在节点上的任意处双击或者单击左边的箭头
3.收起一个节点:点击左边的箭头

使用键盘 >>>
1.向上箭头选择此节点之前的一个节点(在Elements面板内可见的节点,有可能是父节点、兄弟节点、或者兄弟节点的子节点等)
2.向下箭头选择此节点之后的一个节点(同上)
3.向右箭头可以展开一个节点,再次按向右箭头会选择到这个展开节点的第一个子元素,依此论推
4.向左箭头可以收起一个节点,再次按向左箭头会选择到这个收起节点的父元素,依此论推

在Elements面板的最下方是一个面包屑路径,当前选中的节点以蓝色高亮表示,蓝色高亮节点的左侧是它的父节点,右侧是其子节点。

Chrome DevTools — Elements

编辑DOM节点和属性

编辑一个DOM节点的名字或者属性

  • 在节点名字或属性的上方直接双击
  • 选择一个节点,按Enter键,然后(重复)按Tab键,去选择节点名字或者属性
  • 右键选择“增加属性”或者“编辑属性”

当修改节点名字的时候,完成时,其对应的闭合标签会自动更新

以html文本的形式编辑DOM节点及其子元素

有时候涉及到编辑的内容较多时,可以右键选择以html文本的形式编辑,方便、简洁。

移动一个DOM节点

单击节点不放,然后直接拖动即可

删除一个DOM节点

在节点上面右键,选择“删除元素”

让节点出现在当前窗口

我们在Elements面板选择一个元素时,这个元素可能并不在当前视窗内,此时,右键选择“Scroll Into View”就能自动定位到这个节点了,相当于锚点的效果。

显示/隐藏HTML注释

Settings > Preferences > Elements > Show HTML comments

显示更多操作菜单

为了查看更多操作,我们一般都是右键,实际上还有另一个入口。在当前选择的节点上,最左侧有三个点,点击这三个点,就能达到鼠标右键的效果。

Chrome DevTools — Elements

关于DOM还有其他操作,如在DOM上设置断点、监听DOM上绑定的事件等,这些我把它归到js调试的内容中去了,有兴趣的可以查看下一篇《Chrome DevTools - JS调试》

二、编辑样式

查看某个元素上的样式

选择一个元素,Styles窗口显示着所有这个元素上的样式,优先级从高到低:

  • 最上面是:element.style,这些是直接写在HTML中的行内样式或者是在console中动态设置的
  • 其次是直接匹配这个元素的css
  • 然后是一些继承的css,有从父元素继承过来的,也有从浏览器默认样式中继承的

Chrome DevTools — Elements

上图中:
1.元素的样式所对应的选择器
2.浏览器默认的样式,通常会被覆盖
3.被覆盖的样式会有一个删除线
4.继承的样式会被显示在一个个的组里面,其头部为Inherited from <NODE>
5.灰色的样式表示未定义,但是在运行的时候会去计算相应的值

查看被某一选择器影响的元素

Chrome DevTools — Elements

在Styles面板中,把鼠标悬停在选择器上,就能看到此选择器对应的css应用在了哪些元素上面。

类生效与否以及增加新类

点击.cls按钮,可以查看到加在当前元素上的所有类名,也可以在输入框中增加一个新的类名(输入完,按Enter键)

Chrome DevTools — Elements

编辑属性名及属性值

在属性名或者属性值上点击即可进入编辑状态,当某个属性名或属性值高亮时,按Tab键可以选择后面的属性名、属性值、选择器,或者新加属性,Shift + Tab反向。
当一个属性值是与数字相关的时候,有一些快捷键:

  • 上下方向键,±1
  • Alt + 上下方向键,±0.1
  • Shift + 上下方向键,±10
  • Shift + Page Up/Page Down(Windows、Linux)或者Shift + Function + Up/Down(Mac),±100

增加一个新的属性声明

在css规则可编辑区域的空白处,单击即可以创建一条css声明。

增加一条css规则

单击按钮,即可新增一条样式规则。单击此按钮不松,可以选择在哪个样式表中新增css规则。

Chrome DevTools — Elements

查看伪类的样式

  • Elements面板中,在节点上右键选择伪类

Chrome DevTools — Elements

  • 在Styles窗口内,点击:hov按钮,在复选框中选择

Chrome DevTools — Elements

快速为元素添加字体颜色、背景色、阴影等

当鼠标悬浮在某个样式规则上,右下角会有一个“三个点”的按钮,鼠标移动到此按钮上,可以看到几种不同的图标,可以快捷地为元素添加不同的样式。

利用颜色拾取器去修改颜色值

Chrome DevTools — Elements

在某些情况下用颜色拾取器去查看某些颜色值还是很方便的,但是一般情况下,页面上的颜色值UI已经标注好,前端不需要自己再去设计,直接修改更为方便,此部分内容不在阐述。

Shift + 单击可以改变颜色值的格式,如rgb、十六进制等。

im, 无色
  • 本文由 发表于 2019年7月4日09:06:03
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: