谷歌浏览器开发者工具的作用

就是下面这一行常用工具：

1.Elements:这个大家经常用，肯定很熟悉了。元素面板，用来操作DOM和样式，可以 直接在上面进行编辑。

2.Console:  控制台，可以在代码中通过console.log(data)来打印出数据，也可以直接在控制台输入javascript进行操作，直接获取元素。

3. Sources: 这里是页面的源代码，最常用的功能就是进行断点调试，顾名思义就是你可以设置在某一个节点进行调试，这一功能是每个前端程序员必备的技能，如果你还不会，赶快去学习吧。

4.Network: 这里是网络请求，记录当前页面的网络操作，包括详细的时间，http请求和相应，cookies等。

点开之后，有几个常用的操作：

Headers，这里是http请求的核心，包含了请求页面，服务器等相关的信息。

Preview，这里是传递的Json数据，

Response，这里是响应服务器对浏览器请求的文件或数据。

Timing，这里是各种时间，等待时间，连接时间，上传时间，下载时间等。

5.Performance，这里是性能测试，可以通过查看请求开始和结束的时间，来查找加载速度过慢的原因主要实在哪一部分。

6.Memory:从来没用过，里面都是一些配置和分析。

7.Application:可以检查加载的所有资源，应用缓存，数据库，cookies,图片等。

8.Security:可以再面板当中调试安全问题。

9.Audits:这个面板可以分析页面加载过程，可以提供减少页面加载时间，提升反应速度的方案。