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

原创 2013年12月05日 18:39:18

上一章我们熟悉了“网络”面板UI上部分的那排按钮,我们再来看看下面的这个列表。


这个列表上方有“摘要”、“详细信息”这两个链接,“网络”工具提供给我们的就是这两种视图,默认情况下我们看到的就是如图上那样的列表,这个列表就是摘要视图,当我们选中开发这个列表中具体某一项的时候就会跳转到这个信息的详细信息视图了,我们可以通过点击“摘要”、“详细信息”这两个链接在这两种视图间切换。

在摘要视图中显示捕获到的所有信息的快速预览,可以看到请求的 URL;某一条记录的连接协议,一般来说可以看到的协议有 HTTP 和 HTTPS 这两种,当然除了这两种协议之外还有很多很多种协议,只是它们就不那么常见了;后面还有某一条记录的请求方式,我们就可以看到某条记录是 GET 方式还是 POST 方式进行的请求;再后面的结果就是 HTTP 的响应状态码,比如 200、302、404、500 等,通过这个我们就可以非常直观的看到这一条请求是从服务器上加载的资源,还是直接使用的本地的缓存,这个资源是否存在,或者服务器出现了错误等,这对我们非常有帮助;再后面的类型就是某条记录的 MIME 类型是什么,查看 MIME 类型就能知道这次请求的元素是一个 JavaScript 文件,还是一张 PNG 格式的图片;后面的已接受跟已花费代表这条请求的数据总量有多大,浏览器在接收这些内容所耗费的总时间是多少;发起程序这列就可以知道某条请求是由谁发起的,一般来说最常见的就是某个 DOM 元素,比如 <img>标签会请求一张图片,那发起程序就是<img> 这个标签了。


最后一列“计时”是非常有意思的一列,它通过图形的方式非常直观的告诉我们某条记录所耗费的时间,在这一列上我们看到有绿色跟红色两条竖线,每行的记录还由三个颜色组成。绿线跟红线分别代表着整个页面的 DOMContentLoaded 事件和 Load 事件,那边绿线这个位置的时候就说明了DOM已经加载完成了,但是CSS、JS、图片这些还没加载完成,红线的位置表示页面上所有的 DOM、CSS、JS、图片等都已经加载完成了。

下一章我们将会深入到“详细信息”视图中来介绍“网络”面板中更详细的请求信息。

相关文章推荐

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

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

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

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

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开发人员工具:UI响应工具详解

开发工具浏览器windows 8.1IEIE11 摘要:IE11的开发工具更加实用和高效。今天为大家介绍其中的一项新增功能:UI响应工具。这个功能相信对于不少人来说还是陌生的,但是这个功能却相当...

IE11 Developer Preview for Windows 7:实现下一代的网站和应用 – 速度更快

随着最近 Windows 8.1 Preview 的发布,Internet Explorer 11 也已发布,它秉承了我们在各种 Windows 设备和屏幕尺寸上提供最佳 Web 体验的愿景。Wi...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:探索IE11新开发者工具 – “网络”面板功能改进(中)
举报原因:
原因补充:

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