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

原创 2013年12月05日 18:45:27


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


在这个详细视图页面中可以看到详细视图又由请求标头、请求正文、响应标头、响应正文、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 新开发者工具中“网络”面板功能这部分的内容就全部介绍完了。

IE10、IE11以上版本的浏览器的开发调试工具如何查看cookie?

在windows8中预装的IE11,在开发调试工具中cookie是怎么查看的呢?不知道为什么微软做的这么隐蔽,但最终还是被我找到了,对有相同困惑的朋友分享一下,一如既往,10句话不如一张图,看看就明白...

Http请求和Http响应详细解析

http://www.cnblogs.com/linjiqin/p/3560152.html(转载) 一次完整的HTTP请求所经历的7个步骤 HTTP通信机制是在一次完整的HTTP通信过程中,We...

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

当我们在加载网页的时候,会因为种种原因导致网页加载速度太慢,比如网站后端响应时间太长,网站一次性加载的资源太多需要发送过多的请求,网络状况不好,甚至是电脑配置太差? 微软在IE9的开发者工具中加入了...

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

上一章我们熟悉了“网络”面板UI上部分的那排按钮,我们再来看看下面的这个列表。 这个列表上方有“摘要”、“详细信息”这两个链接,“网络”工具提供给我们的就是这两种视图,默认情况下我们看到的就...

IE11 —— F12 开发者工具

F12 开发者工具 简介 使用 F12 开发人员工具,你可以调试、测试网页并加快其速度。无论你是需要微调你的 CSS 布局还是查找内存泄漏,你都能在此处找到帮助工具。 如果你正在 I...

IE11全新F12开发人员工具快捷键大全

微软为Win7/Win8.1系统上的IE11浏览器配备了更便捷科学的F12开发人员工具,拥有更简洁的交互界面、UI响应加速网页运行,支持CSS、HTML以及JavaScript自动完成,还能模拟移动屏...

IE11全新F12开发人员工具快捷键大全

微软为Win7/Win8.1系统上的IE11浏览器配备了更便捷科学的F12开发人员工具,拥有更简洁的交互界面、UI响应加速网页运行,支持CSS、HTML以及JavaScript自动完成,还能模拟移动屏...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:探索IE11新开发者工具 – “网络”面板功能改进(下)
举报原因:
原因补充:

(最多只允许输入30个字)