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

原创 2013年12月05日 18:30:00

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

微软在IE9的开发者工具中加入了“网络”工具,“网络”工具包含了涉及加载和网页操作的所有网络请求的信息,这样我们就可以利用这些信息去分析上面的问题,现在在IE11中“网络”工具得到了进一步的加强;

我们分为三章来讲解IE11新开发者工具中的“网络”面板部分。

第一部分我们先来看看“网络”工具的UI:


我们看到最上面有一排按钮,下面是一个列表。


上面那排按钮中最左边第一个按钮是启用网络流量捕获(F5),我们点击这个按钮之后“网络”工具就开始开始记录网络流量,并且在下面的摘要视图中把捕获到的这些信息显示出来;

第二个按钮从图标上来看就已经很形象了,它是导出捕获的流量,点击之后就可以将刚刚捕获到的这些数据导出为XML或者CSV格式;

第三个按钮是一个开关,它是始终从服务器中刷新,从字面上就能看出,当点击开启之后的获取的页面元素都是从服务器中获取,而不使用浏览器的缓存,其实我们可以把它简单的理解为禁用缓存的开关就好;

第四个按钮是清除浏览器缓存(Ctrl + R),点击一下之后IE11的开发者工具就会清除掉现在浏览器中的缓存,我们就可以测试出页面首次加载需耗费的时间;

第五个按钮是清除域的 Cookie,这个也很好理解,就是清除掉当前域中的 Cookie,这样在测试过程中想清除掉要测试的网站 Cookie 就可以只删除掉当前域相关的所有 Cookie 而不会影响到其他的网站;

第六个按钮也是一个开关,默认情况下它是开启的状态,它的中文翻译是导航时清除项,它的作用是当它开启的时候每次导航到新的页面就会清除掉之前记录的信息,如果没有开启它那跳转到新的页面之后就会用一条分隔线标注哪些是之前页面的信息,哪些是当前新的页面的信息;

第七个按钮是清除所有项,点击它就可以将摘要视图中显示的这些信息都清除掉;


最后还有一个搜索框,它可以用来搜索捕获到的这些流量中的字符串,输入要搜索的字符串之后就按 ENTER 就可以依次查看了。

下面一章我们将会介绍“网络”工具下面的部分——“摘要”视图。

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

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

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

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

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

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

ie11开发者工具无法使用

安装ie11之后发现开发者工具一直是edge,无法使用。 下载ie11补丁,链接为:http://www.microsoft.com/zh-cn/download/details.aspx?...
  • u012149354
  • u012149354
  • 2015年12月01日 13:58
  • 1966

ie开发者工具

今天把ie浏览器从9升级到了11,却发现f12后开发者工具出错不能使用 在网上查找了下原因,需要下载一个补丁IE11-Windows6.1-KB3008923-x64.msu(我的是64位) ...
  • shadow_yn
  • shadow_yn
  • 2015年12月14日 21:57
  • 804

Chrome开发者工具面板功能

摘自:http://www.cnblogs.com/charliechu/p/5948448.html Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览...
  • fm0517
  • fm0517
  • 2017年09月25日 15:10
  • 82

chrome开发者工具功能拾遗:Network面板篇

本文主要介绍一些本人在此之前不甚了解,但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能。也借这篇文章提醒一下自己,在实际项目中多使用这些功能,尽快熟悉起来,提升自己的工...
  • array_huang
  • array_huang
  • 2015年12月04日 18:41
  • 1489

ie11 开发者工具

 http://blog.csdn.net/binyao02123202/article/details/41944931 简介 使用 F12 开发人员工具,你可以调试、测试网页...
  • doraemonhall
  • doraemonhall
  • 2015年10月14日 16:30
  • 889

IE11 —— F12 开发者工具

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

IE11开发者工具

IE11开发者工具问题:​ IE11安装成功,但是开发工具无法使用(windows系统)解决:​ 安装IE11-Windows6.1-KB3008923-x64.msu重启即可Windows ...
  • lydxwj
  • lydxwj
  • 2017年09月15日 23:01
  • 57
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:探索IE11新开发者工具–“网络”面板功能改进(上)
举报原因:
原因补充:

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