Chrome DevTools — Elements

  一、编辑DOM 查看元素 页面上的任意元素,在其上面右键,选择“Inspect 在Elements面板上,

  1.向上箭头选择此节点之前的一个节点(在Elements面板内可见的节点,有可能是父节点、兄弟节点、或者兄弟节点的子节点等)

  3.向右箭头可以展开一个节点,再次按向右箭头会选择到这个展开节点的第一个子元素,依此论推

  4.向左箭头可以收起一个节点,再次按向左箭头会选择到这个收起节点的父元素,依此论推

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

  选择一个节点,按Enter键,然后(重复)按Tab键,去选择节点名字或者属性

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

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

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

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

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

  最上面是:element.style,这些是直接写在HTML中的行内样式或者是在console中动态设置的

  然后是一些继承的css,有从父元素继承过来的,也有从浏览器默认样式中继承的

  3.被覆盖的样式会有一个删除线.继承的样式会被显示在一个个的组里面,其头部为

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

  Tab键可以选择后面的属性名、属性值、选择器,或者新加属性,Shift + Tab反向。

相关阅读