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

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

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

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

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

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


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


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

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

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

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

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

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

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


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

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

相关文章推荐

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

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

探索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 Developer Preview for Windows 7:实现下一代的网站和应用 – 速度更快

随着最近 Windows 8.1 Preview 的发布,Internet Explorer 11 也已发布,它秉承了我们在各种 Windows 设备和屏幕尺寸上提供最佳 Web 体验的愿景。Wi...

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

本文主要介绍一些本人在此之前不甚了解,但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能。也借这篇文章提醒一下自己,在实际项目中多使用这些功能,尽快熟悉起来,提升自己的工...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:探索IE11新开发者工具–“网络”面板功能改进(上)
举报原因:
原因补充:

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