使用强大的Chrome开发者工具——网络请求篇

距本系列上一篇,也有20天了。这次就拿百度首页开刀吧~建议登陆百度账号,可以看到更多网络请求类型。

网络请求的查看,主要就是在Network这个面板上了,在Elements面板的隔壁。大致上是这样一个界面

QQ20150420-2@2x

1.第一个红色圆圈按钮,用来切换是否记录网络请求,刚打开开发者工具的时候应该是开启(红色)状态,页面上只要发生了网络请求都会在这里产生记录。点击切换为灰色,则接下来的网络请求将不会记录。

2.第二个灰色禁止按钮,用于清空网络请求记录。

3.第三个漏斗按钮,用于开启过滤条件组,蓝色为开启状态。过滤条件组也即紧接着的下面那一行,

第一个文本框用来,输入关键字过滤网络请求记录,实时搜索奥~

后面的一排按钮都是互斥的,All是不做任何过滤,其他的分别用于过滤:文档请求(Documents),css样式文件(Stylesheet),图片(Images),audio、video等媒体(Medias),脚本(Scripts),XMLHTTPRequest请求(XHR),字体(Fonts),WebSocket请求(WebSockets),Flash等其他请求(Other)。

最后还有一个Hide data URLs的checkbox,用于切换是否隐藏dataurl,即图片的dataurl。

4.列表图标的按钮,用于切换表格记录中的行视图,大视图或小视图,大视图能够显示更详细的信息。

5.时间轴图标的按钮,当你只关心各个资源的加载时间轴时,它会派上用场。

6.Preserve Log checkbox,若为选中状态则在刷新页面时,不清除旧的网络请求记录,反之清除。

7.Disable Cache checkbox,若为选中状态,则在打开开发者工具的情况下刷新页面,所有静态资源都强制从服务器冲下加载。反之则会根据具体情况使用缓存。

8.最后来看一下记录列表,每列依次是

Name:请求名,

Method:方法(get,post等),

Status:响应状态,

Type:请求类型,

Initiator:初始化器(请求发起者),

Size:资源大小,

Time:请求花费时间,

TimeLine:时间线。

每一列都可以点击列头进行排序。

随便点击一个请求记录 ,右侧会出现该请求的详细HTTP请求与响应数据,分为头部,响应预览,响应,cookies,时间点五类信息。尤其是以JSON为响应数据的XHR请求,查看响应预览(Preview)非常人性化,可以直接查看格式化的数据结构,如下图所示

QQ20150420-3@2x

在Header里面,如果请求参数是JSON格式,那么有类似的功能。