在谷歌调试工具里边有很多的选项卡，每个选项卡，都可以便于我们分析解决一方面的问题，有些是html、css，有些是js，有些是网络，有些是性能等等。

元素（Elements）选项卡

在这个选项卡里边，我们可以看到整个页面的元素结构。在这个选项卡下边，有一些子选项卡。

1.样式（Styles）：我们目前选中的这个元素的样式

1.1内联样式

当我们在element.style中添加transform: translate(-60px, -30px);时，input同时会添加style属性，所有的样式都可以通过前面的多选框给去掉。

1.2你自己写的样式

1.3浏览器的默认样式

1.4继承的样式

有一些样式被一条横线划掉，说明被其他样式覆盖了。

1.5搜索样式

1.6伪类样式

方便监控各种状态下的样式

1.7class类样式

这里罗列这个元素的目前应用到的类样式，目前应用了两个类样式，你可以在这里新增类样式，通过前面的复选框，可以去除相应的的样式

2.计算样式（Computed）这个元素所有的样式

默认显示你设置的样式，这里的样式跟Styles里边的样式的区别是，在浏览器的渲染原理里边有一个步骤叫做样式计算，当你给一个元素设置了“width:100%”，通过计算会转换成像素值最终结果"width：546px"，这才是浏览器渲染真实显示的样式。

3.布局（Layout）

这里主要是分析弹性盒子和网格布局。有哪些元素应用了弹性盒子布局，哪些元素用了网格布局，可以在这里查看。

4.事件监听器（Event Listeners）是指某一个元素的目前的事件监听监测哪些事件

百度一下这个“按钮”上有两个事件监听，一个mousedown，一个mouseout，点击祖先(Ancestors)按钮可以查看这个元素所有祖先元素的事件监听，点击监听事件可以展开它查看有多少个监听器在哪个js里进行监听，点击这个js可以跳到相应的源码位置，我们还可以点击移除(Remove)按钮移除这个事件。

5.属性（Properties）

这里表示这个元素对应的DOM对象，它的所有属性都在这里。

6.DOM断点（DOM Breakpoints）

在元素上右键给元素添加中断条件，有三个选项（子树修改、属性修改、移除节点），比如点击子树修改，这时就会出现一个DOM断点，当在页面上做一些操作时，你会发现它会跳到某一段代码，这就说明这段代码改变了这个元素的子元素，它就会定位到这行代码。