前言

很多程序员都喜欢用谷歌浏览器，因为谷歌浏览器简洁，也没有广告，可以安装许多非常强大的插件等等，但是很多程序员不太会使用谷歌浏览器的调试工具，代码有时候出现问题了就盯着源码找问题，很多人对谷歌浏览器的调试工具非常陌生，关于谷歌浏览器的调试工具有多重要，不会使用这个调试工具就相当于一个厨师做菜不会用刀

Elements

f12 打开调试工具，里面提供了非常多信息来帮助我们分析这个页面

在谷歌浏览器的调试页面里有非常多的选项卡，其中最常用的有:

1. Elements显示页面代码的窗口

2. Console浏览器控制台,可以直接在里面写 js 代码

3. Socures调试窗口,这里用的最多的就是断点调试了

4. Network请求窗口,保存所有请求的数据

今天我们自己讲讲 Elements

Elements 为我们展示的信息已经足够丰富了，我们可以看到整个页面的元素结构，然后下面还有一些子选项卡

styles

首先说说 styles，它表示我们目前选中元素的当前样式，里面有作者写的样式，浏览器的默认样式，来自于继承的样式

在众多样式里有个样式比较特殊，在样式表的第一个叫 element.style，表示当前元素的内联样式，就是加在 html 标签里的 style，在里面添加样式，标签里就会多出一个 style 属性

我们还可以进行搜索，添加伪类和 class

Computed

在 Computed 里可以看到一个盒模型，还可以看到下面有很多样式，点击 Show all，这个元素的所有样式都会全部显示出来

里面的样式是什么他就会显示出来什么，它是不会骗你的，如果样式出问题了就查看 Computed

Layout

Layout 选项卡主要分析哪些元素用了弹性盒和网格布局的

Event Listeners

Event Listeners 选项卡主要用于某个元素目前的事件监听

可以点击展开看到点击事件里有多少个监听器，在哪个 js 文件里进行监听，点击 js 就跳转到相应源码的位置

还可以点击灰色的 Remove 按钮移除事件监听

Properties

Properties 选项卡表示对应的 DOM 对象，为我们带来了什么有用的信息呢？

我们可以看到这里有个 react，说明这个界面是用 react 写的

DOM Breakpoints

DOM Breakpoints 选项卡可以监听某个元素的变化

我们给 body 打上一个断点

对页面进行一些操作，它就会跳到某个 js 文件里

总结

好好利用 Element 和里面的子选项卡，这一个选项卡有时候远比你盯着源代码更能显示出更多的信息,更别说还有其他的选项卡，浏览器插件等等