我在极客学院过了一遍 Devtool 的使用方法, 感觉还是学到一些新的东西.

这里记录一下我认为比较有用的功能:

网页加载速度

在 Network 下面的 timeline 中我们可以看到瀑布图展示的时间数据, 并通过颜色标码来显示资源类型:

timeline

以上的颜色显示了不同元素加载的时间:

timeline2

这样网页加载速度的分析就更加清晰了.

高级过滤功能

在 Network 中的 filter 中, 我们可以选择过滤一些我们想要获取的信息, 例如:

删选大于 20k 的文件
大于20k 的文件

筛选状态码为200的请求

状态码为200

筛选 method 方法

method 为 post

调试 Javascript

这个操作在 sources 面板下面:

Sources

可以通过设置断点的方式来做 javascript 的调试.

模仿移动设备

mobile device