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

上一章我们熟悉了“网络”面板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、图片等都已经加载完成了。

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