• 【转载】Firebug中net面板的使用



    今天志刚问到Firebug的net面板的 onload是神马意思,我哑口无言,用Firebug这么多年了都木有仔细研究过。正好这两天和大猫舜子等童鞋一起研究@import css的问题,顺便把这个详细了解下吧。
    Net面板
    Net面板就是Firebug中的net tab,中文应该叫“网络”?它可以监控页面中的HTTP请求,然后将收集到的信息展现出来。固然,要使用这个功能,你要先点击Net字符右边的小三角将它启用。
    PS:我这里的环境是Firefox 4+Firebug 1.7,旧版本的界面可能会稍有不合。



    它会将页面中所有的请求/相应的完整过程整理好列出来。



    上面的截图显示,前端观察首页的页面请求概况:共9个请求,每个条目都包含相关资源一些信息:
    请求类型(GET|POST)
    请求地址(鼠标悬浮在URL列上时会完整显示)
    状态及其描述(200 ok)
    所属域名
    资源巨细
    图形化的时间线
    最底部一行会显示一个简单的统计信息。
    请求/响应详情
    点击url前面的+按钮后,该条目就会展开,显示该请求的详细信息:



    可以看到这里有几个tab:
    headers:请求/响应的HTTP头
    response:从服务器返回的数据
    HTML:HTML响应的预览(只有HTML格式的请求才会显示)
    headers
    从上图中可以看到,headers部门会展示两个信息:响应头和请求头,别离包含着一些信息,需要注意的是,请求头中包含了User-Agent信息和 Cookie值。记得之前有个Firebug的扩展叫Firecookie,现在的Firebug展示了这些信息,这个扩展基本上就没有用了。
    PS:貌似之前有个Firefox的插件叫Live Http Header的,嗯,功能基本上也被Firebug集成了。
    Response
    响应tab显示请求后从服务器返回的数据,嗯,和响应头是纷歧样的,这里回事一些纯数据,如果是text/*类型(content-type)就会显示原始代码文本,如果是image/*类型,会直接显示相关图片。
    浏览器缓存
    如果请求的资源使用了缓存,那么这里就会多出一个cache的tab:



    post|put请求
    如果请求会发送一些数据,这里将会泛起另一个tab:



    URL参数
    如果页面请求中包含一些参数(查询字段),则会有一个Params的tab在前面:



    json
    如果请求是Json,那么这里会有json的tab,采取弹性分层的结果展示详细的数据:



    时间线



    firebug的时间线以瀑布图的形式展现,很直观,而当你把鼠标悬浮在时间线上的时候,就会弹出该条时间线的详情的tips,这个tips包含5个阶段和2个事件:
    DNS Lookup:DNS查询时间
    Connection:建立一个TCP链接花掉的时间
    sending:向服务器发送请求需要的时间
    Waiting :期待服务器响应
    Receiving:从服务器获取文件消耗的时间
    DOMContentLoaded: 事件,DOMContentLoaded事件完成的时间(从请求倡议时开始,如果这个时候事件已经完成,这里就多是负值)
    Load:事件,页面load事件完成的时间(从请求倡议时开始,如果这个时候事件已经完成,这里就多是负值)
    最上面一行,+859ms started暗示前面的请求花掉的时间。
    案例的解读:
    黄色的tips中,每一行都包含两个数字,前面的暗示该阶段倡议时在该请求中的时间点,第二个是该阶段花掉的时间,好比,图中,前三行花掉的时间都是0, 所以,waiting阶段,左边的数字就是0,而右边是自己花掉的时间409ms,那么在下一个阶段,左边的时间就是前面的时间的和——409ms。
    在这个请求开始后6.87s时,DOMContentLoaded事件完成。
    在这个请求开始后8.43s,load事件完成。
    深入了解:



    从这个截图,我们可以看到以下信息:
    第一个请求在2.65s时完成,第二个在1.52s…等
    从第一个请求到最有一个请求,花掉了共6.96秒时间
    从第一个请求到load事件完成,花掉了6.97秒钟的时间
    插图版解释:



    因为DOMContentLoaded和load事件花掉的时间多是负值,也就是在事件在请求完成之前就完成了,两者都多是负值,而通常最后一个请求完成于load事件结束之后,所以,通常右下角onload的时间会比总时间少。

  • 相关阅读:
    ASP.NET页面生命周期
    C#之virtual override new解析
    js之闭包、this
    C#使用定时任务框架Windows.TaskSchedule.exe安装控制台应用程序创建的Windows服务
    C# 利用 Windows服务模板 创建、安装与卸载Windows服务
    SQL代码生成器
    C#之JSON序列化与反序列化
    Vue源码学习1——Vue构造函数
    angular编写表单验证
    使用canvas编写时间轴插件
  • 原文地址:https://www.cnblogs.com/Loyalty/p/2451447.html
Copyright © 2020-2023  润新知