探索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 新开发者工具中“网络”面板功能这部分的内容就全部介绍完了。

IE11 —— F12 开发者工具

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

IE下的deflate模式

浏览器有一个非常有用的特性:自动解压。在使用AJAX请求数据的时候,数据在服务器端压缩传输,在浏览器端自动解压,请求直接得到解压后的结果。在Request Header中,一般会列出浏览器支持的压缩格...
  • mythma
  • mythma
  • 2015年10月10日 13:27
  • 1935

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

接着上篇文章,点击计时这列的某条记录之后就进入到了详细视图页面。 在这个详细视图页面中可以看到详细视图又由请求标头、请求正文、响应标头、响应正文、Cookie、发起程序、计时这几部分组成。现...
  • u011493253
  • u011493253
  • 2013年12月05日 18:45
  • 15661

邹颂兵:IE11全新体验及开发工具分享

  • 2014年05月29日 14:08
  • 1.32MB
  • 下载

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

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

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

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

IE开发者人员工具使用说明

  • 2013年06月06日 08:28
  • 2.81MB
  • 下载

解决 IE11 中 F12调试 空白 无法使用

  • 2016年01月13日 09:25
  • 50B
  • 下载

IE11 F12开发者工具不可用问题

Win7系统安装IE11后,发现F12开发者工具不能够使用,报以下错误: 这是缺少了IE11的累积性更新,需要安装微软的更新补丁,该更新区分32位和64位  Cumulative Securi...
  • fengxing11
  • fengxing11
  • 2016年10月11日 16:39
  • 7221

ie11开发者工具无法使用

安装ie11之后发现开发者工具一直是edge,无法使用。 下载ie11补丁,链接为:http://www.microsoft.com/zh-cn/download/details.aspx?...
  • u012149354
  • u012149354
  • 2015年12月01日 13:58
  • 1967
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:探索IE11新开发者工具 – “网络”面板功能改进(下)
举报原因:
原因补充:

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