pcBeta 发表于 2014-1-6 16:53

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


当我们在加载网页的时候,会因为种种原因导致网页加载速度太慢,比如网站后端响应时间太长,网站一次性加载的资源太多需要发送过多的请求,网络状况不好,甚至是电脑配置太差?微软在IE9的开发者工具中加入了“网络”工具,“网络”工具包含了涉及加载和网页操作的所有网络请求的信息,这样我们就可以利用这些信息去分析上面的问题,现在在IE11中“网络”工具得到了进一步的加强;我们分为三章来讲解IE11新开发者工具中的“网络”面板部分。
第一部分我们先来看看“网络”工具的UI:http://static.cdn.pcbeta.com/data/attachment/album/201401/06/165034d0fd13001dfly97z.jpg
我们看到最上面有一排按钮,下面是一个列表。 http://static.cdn.pcbeta.com/data/attachment/album/201401/06/1650332uy75lmwgahb3y3h.jpg
上面那排按钮中最左边第一个按钮是启用网络流量捕获(F5),我们点击这个按钮之后“网络”工具就开始开始记录网络流量,并且在下面的摘要视图中把捕获到的这些信息显示出来;
第二个按钮从图标上来看就已经很形象了,它是导出捕获的流量,点击之后就可以将刚刚捕获到的这些数据导出为XML或者CSV格式;
第三个按钮是一个开关,它是始终从服务器中刷新,从字面上就能看出,当点击开启之后的获取的页面元素都是从服务器中获取,而不使用浏览器的缓存,其实我们可以把它简单的理解为禁用缓存的开关就好;
第四个按钮是清除浏览器缓存(Ctrl + R),点击一下之后IE11的开发者工具就会清除掉现在浏览器中的缓存,我们就可以测试出页面首次加载需耗费的时间;
第五个按钮是清除域的 Cookie,这个也很好理解,就是清除掉当前域中的 Cookie,这样在测试过程中想清除掉要测试的网站 Cookie 就可以只删除掉当前域相关的所有 Cookie 而不会影响到其他的网站;
第六个按钮也是一个开关,默认情况下它是开启的状态,它的中文翻译是导航时清除项,它的作用是当它开启的时候每次导航到新的页面就会清除掉之前记录的信息,如果没有开启它那跳转到新的页面之后就会用一条分隔线标注哪些是之前页面的信息,哪些是当前新的页面的信息;
第七个按钮是清除所有项,点击它就可以将摘要视图中显示的这些信息都清除掉;http://static.cdn.pcbeta.com/data/attachment/album/201401/06/165035yy5955vv5g33svg3.jpg
最后还有一个搜索框,它可以用来搜索捕获到的这些流量中的字符串,输入要搜索的字符串之后就按ENTER 就可以依次查看了。下面一章我们将会介绍“网络”工具下面的部分——“摘要”视图。


yinxinlmk 发表于 2014-1-6 21:48

这样技术含量的帖子没人顶太伤人了,这板块太冷清

kttd 发表于 2014-1-6 22:11

太复杂了。学习一下,

qiyinmiss 发表于 2014-1-18 19:22

这么好的帖子不能沉了,先收藏走起。。。

ljbin 发表于 2014-1-19 15:59

很难见到这样的帖子,收起,谢谢!
页: [1]
查看完整版本: 探索IE11新开发者工具 – “网络”面板功能改进(上)