zoukankan      html  css  js  c++  java
  • firebug net面板细致讲解

    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地时间会比总时间少。

    然后大概从最后这里能找到一些页面(optimize)优化地点,期望高人能给予指导。

    时不我待,不负韶华!立刻行动!不吃学习的苦就会吃生活的苦!
  • 相关阅读:
    .Net转Java自学之路—SpringMVC框架篇九(拦截器)
    .Net转Java自学之路—SpringMVC框架篇八(RESTful支持)
    移动端高清适配、布局开发解决方案
    Webpack+Gulp+React+ES6开发
    gulp使用gulp-file-include将header/footer引入页面
    git在window与linux的换行符问题
    文件(图片)上传组件
    ie8、9跨域上传文件(图片)
    移动端rem布局背景图片使用以及sprite雪碧图
    iOS/Android 浏览器(h5)及微信中唤起本地APP
  • 原文地址:https://www.cnblogs.com/zrp2013/p/3069023.html
Copyright © 2011-2022 走看看