谷歌调试器

谷歌调试器

1. Element选项卡

该选项卡主要帮助开发人员快速查看页面结构以及定义样式问题

红色区域为页面结构

左上角有两个小按钮，一个鼠标箭头，一个手机

• 当点击箭头时，此时将鼠标移入页面中，你鼠标所停留地方对应dom结构会自动出现在可视区域，并且页面上会有一个tooltips展示该元素的一些基本信息，比如类名，宽高

  

• 当点击小手机时，这个操作主要是为了移动端开发或者调试开启的

黑色区域为选中元素的属性，我们注重说明黑色区域的功能

• style
  

​ style 中还有两个比较常用的选项

分别是**:hov** 和**.cls**,点击:hov 时会展示出伪类选项,当勾选某一个时，就会显示出该元素对于的样式(如果有的话) 比如

点击.cls 时 会展示当前元素 所有的类名 ，可以手动进行勾选，进行应用与取消，如下图

• Computed

  • 展示选中元素计算之后的属性，即将那些相对大小的属性，全部计算为一个绝对的值

  • 

  • 分成两部分 ，上面一部分展示的就是当前元素的盒子模型，下面即计算后的属性

• layout

  • 展示的是该页面中用到的网格布局和弹性布局
  • 

• Event Listeners

  • 故名思义 显示该该元素绑定的DOM事件

  • 

  • 看到该元素绑定了鼠标移入移出 事件 蓝色部分是代码所在位置 点击remove 事件就被移除了，若是勾选ancestors 则会展示该元素所有祖先元素绑定的事件

  • 

• Properties

  • 展示该元素对应DOM对象所有的属性
  • 

• DOM breakpoints

  • 可以监听某一个元素的变化

  • 

  • 如何给一个元素添加DOM断点呢？

    • 在页面结构中，将鼠标放在该元素上右击找到break On选项

    • 

      • subtree modifications 监听子树的改变
      • attribute modifications 监听自身属性的改变
      • node removal 监听自身被移除的变化

    • 

    • 添加之后，一旦触发相应的变化，便会立即跳到相应源码的位置