Chrome DevTools 使用详解

写在前面：Chrome DevTools 系列文章正在紧张地整理当中，目前正在整理 DevTools 的第一部分： Elements，大家可以关注 Chrome DevTools 来获得最新的信息，也可以关注整个项目front-end-study。

Chrome DevTools（Chrome 开发者工具） 是内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。官网还推荐一款叫做 Chrome 金丝雀版本（Chrome Canary）的 Chrome 浏览器，从这里你可以获得最新版本的 DevTools。为什么 Google 称之为金丝雀呢，因为金丝雀早期在矿井中被用来预警，而该版本的 Chrome 一定程度上也能起到该作用。不用担心 Chrome Canary 会覆盖原本的 Chrome，从 Logo 就可以看出这是两个软件。本文的实操性很强，建议大家在阅读时进行尝试，以加深印象。另外，需要注意一下的是，本文不是对 DevTools 官方文档的翻译，只是对我们实际使用中经常使用到的有用的功能进行整理。

各种 console 语句来实现），另一方面用来当做 shell 窗口来执行脚本以及与页面文档、DevTools等进行交互

Sources：Sources 面板主要用来调试页面中的 JavaScript

Network：在 Network 面板中可以查看通过网络来请求来的资源的详细信息以及请求这些资源的耗时

Performance：在 Performance 面板可以查看页面加载过程中的详细信息，比如在什么时间开始做什么事情，耗时多久等等。有人会问，这个跟上面的 Network 有什么区别呢，上面也能显示耗时信息。在 Performance 面板中，你不仅可以看到通过网络加载资源的信息，还能看到解析 JS、计算样式、重绘等页面加载的方方面面的信息

Memory：Memory 面板主要显示页面 JS 对象和相关联的 DOM 节点的内存分布情况

Application：记录网页加载的所有资源，包括存储信息、缓存信息以及页面用到的图片、字体、脚本、样式等信息

Security：用于检测当面页面的安全性

Audits：审计面板会对页面的加载进行分析，然后给出提高页面性能的建议，官网建议查看 PageSpeed Insights 来获得更多的页面加载建议。

细心的同学一定发现了我们现在使用的 Chrome 上面没有 Performance 和 Memory，而是 Timeline 和 Profiles，是不是我写错了呢？不是的，而是 Chrome 到 v57 后，便将 Timeline 更名为 Performance，将 Profiles 更名为 Memory。目前来看，Google 仅仅是更名以及调整了部分功能所属的面板而已，并没有功能上的增删，这个会在下面介绍各个面板时详细介绍。

除了 9 个功能面板，工具栏还有 3 个选项，分别是左侧的 、 和右侧的  ，分别表示检查元素、设备切换以及 DevTools 的定制化面板。检查元素后面在介绍 Elements 时会提到；设备切换是我们比较常用的功能，能够将你的浏览器模拟成一个带触屏功能的移动设备；DevTools 定制化面板是对 DevTools 本身的定制与控制。下面着重介绍下“切换设备”这一功能。

DPR（默认是 1，可不填）、User-agent（用户代理，可不填），选择屏幕类型，最后点击 "Add"，便可以将你的设备加到设备列表里了。这里再多说一下屏幕类型：

• Mobile：可触屏的移动设备，鼠标指针是粗黑的点，代表手指与屏幕的触点

• Mobile(no touch)：不可触屏的移动设备

• Desktop：一般指 PC 上的网页，鼠标指针与普通 PC 网页类似

• Desktop(touch)：带触屏的 PC 上的网页

所有大家看到鼠标指针是个粗黑的点时不要觉得奇怪，那只是代表你现在在操控一台移动设备。

当你将你自定义的设备添加进设备列表时，DevTools 会自动选中，从而可以在下拉框中看到第四部分：

• 自定义的设备

那我的设备举例，我一般不怎么用到移动设备，所以我就保留了一个 iPhone 6，另外我还需要一个 1920 * 1080 的高清屏，所以我以 HD 命名，定义了一个 1920 * 1080 的设备。

上面大概介绍了 DevTools 的几个面板和另外 3 个功能选项的作用，着重介绍了切换设备的功能，下面我们一起来看一下如何使用每一个面板。

Github 进行举例。

Elements

Console

Sources

Network

Performance

Memory

Application

Security

Audits

相关资料：

1、https://www.imooc.com/article/2559

2、https://www.oschina.net/translate/performance-optimisation-with-timeline-profiles

3、http://blog.csdn.net/tonghuaxl/article/details/73479976

4、http://www.cnblogs.com/caizhenbo/p/6679478.html#3889967

5、https://www.jianshu.com/p/471950517b07   【Network分析（包括cookies）】