探索IE11新开发者工具 – “网络”面板功能改进(下)

接着上篇文章，点击计时这列的某条记录之后就进入到了详细视图页面。



在这个详细视图页面中可以看到详细视图又由请求标头、请求正文、响应标头、响应正文、Cookie、发起程序、计时这几部分组成。现在进入的这个页面是详细视图的计时页面，这个页面跟摘要视图相比更为详细，因为摘要视图只是给你一个全局的大致的快速预览，而我们进入到详细视图页面之后就可以仔细的去观察这其中每条的具体内容了。刚刚有发现每条记录是有三个颜色组成的，在这里就对每种颜色有了详细的解释。暗红色代表开始，它表示从最初创建请求到发送请求之间的时间;黄色部分代表请求，表示接收到第一个字节所需的时间。发送请求并接收服务器的第一个响应所需花费的时间;蓝色部分是响应，表示接收服务器的响应数据所花费的时间。除了这三种颜色之外还能看到上面标出了等候、差距这两个部分，这让我们在看这三种颜色所代表消耗的时间的时候能有一个参照。这仅仅只是一个计时部分IE11开发者工具就帮我们记录了如此多的信息，另外其实我们只要点击到某行，下面的文本框中就会显示出相应的说明，在这么多小的细节处处体现出IE11的开发者工具的人性化。



看完了计时页面，我们从头开始来看看请求标头和请求正文页面，在请求标头页面显示了发送至服务器的请求标头，页面中用键值对的方式来显示出相关的信息，比如请求的值就包含了请求方式，请求的资源，请求的协议;Accept 表示它接收的MIME类型有哪些，Referrer表示这条请求的来源是谁，Accept-Language表示请求接收的语言是什么，User-Agent就是该条请求发送给服务器的浏览器的User-Agent的值，Accept-Encoding这行可以看出服务器端是否有启用gzip压缩。

在请求正文页，我们发现大多数的请求正文都是空白的，因为请求正文一般是用于包含POST请求的数据，这样我们找到一个 POST 的请求的就可以看到请求正文了，而内容就正是POST要发送至服务器的数据。



请求部分的看完了再来看看响应标头和响应正文。响应的这部分显示的是从服务器接收的响应标头跟接收到的响应的数据，如果响应的内容是图片，IE11开发者工具可以直接将图片显示出来。

Cookie 这页用来显示已发送和已接收的 Cookie，这里面有八列，方向表示是已发送的还是已接收的 Cookie，键值这两列用来显示用 Cookie 来保存的数据，后面还有过期日期、域、路径、安全等用来显示 Cookie 的更多信息。因为如果包含了 Cookie,，那么每次请求都会发送 Cookie，所以我们一般会采用 Cookie-free domains 来优化性能，那么我们在 Cookie 这页就可以帮助我们来检查 Cookie-free domains 的优化情况了。



最后剩下的发起程序这页就显示了发起程序的详细信息。

IE11 新开发者工具中“网络”面板功能这部分的内容就全部介绍完了。