探索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新开发者工具 – “网络”面板功能改进(下)

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

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

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

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

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

ie开发者工具

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

ie11开发者工具无法使用

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

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

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

Chrome开发者工具面板功能

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

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

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

IE11 —— F12 开发者工具

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

IE11开发者工具

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

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