记忆盒子

把记忆装进灰色的盒子,封装起来,那年那月,重新拾起。

首页搜索目录
search
当前主题: 互联网络

如何利用Firefox自带的Web开发者工具分析网页

作者:Kaka    时间:2013-11-26 23:55:30    浏览:    评论:1

      估计很多人都用过了Firefox自带的Web开发者工具来诊断或调试网页,尤其是网站建设人员。该工具非常强大,当我们想研究一张网页的访问详情时,例如想知道网页包含有哪些请求,各请求的访问是否正常,访问时间是怎样的等等,那么我们就可以借助于该工具。

      Firefox自带的Web开发者工具使用非常简单,点击一下按钮就可以窥视到网页内部各元素的瀑布流式请求,可以看到网页里哪些文件在什么时候被请求和耗时多少并显示到浏览器上。

      Firefox自带的Web开发者工具在哪里

      点击菜单->工具->Web开发者->切换工具,便可看到如下图示

图1:Firefox Web开发者工具

图1:Web开发者工具

      默认的Web开发者工具包含控制台、查看器、调试器、央视编辑器、分析器和网络分析器这6个部分,本文要说的是网络分析器这部分。

      点击Web开发者工具的“网络”标签,如上图1,会看到下面出现一个空表单头,包含的内容有方法、文件、域名、类型、大小和时间线,在最下面还有几个标签可以切换:所有、HTML、CSS、JS、XHR、字体、图片、媒体、Flash。

      如何利用网络分析器分析网页

      1、把窗口切换到“网络分析器”(如下图,点击“网络”这个标签)。

图2: Firefox网络分析器

图2: Firefox网络分析器

      2、然后访问需要分析的网页,这时我么可以看到网页的瀑布流请求和时间线显示,如下图

图3: Firefox网络分析器

图3: Firefox网络分析器

      通过上图3所示,可以清晰的看到网页内部各文件的请求情况,右侧是访问时间线。

      点击任何一行,右边就会出现该请求的详细信息,如下图所示

图4: Firefox网络分析器

图4: Firefox网络分析器

      再想展开时,点击那个展开的图标即可,如下图

图5: Firefox网络分析器

图5: Firefox网络分析器

      总结

      利用Firefox网络分析器分析网页,不需要安装任何插件,既简单又方便,可谓Web开发者的一大利器。

x

标签: Firefox  

※ 网站速度慢?试试网站自动优化工具 ※

上一篇: 标头“Vary:Accept-Encoding”指定方法及其重要性分析
下一篇: Chrome的开发者工具比Firefox的用户体验更好

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客                   QQ交流群(312716741)

  • 通过Google订阅本站 通过鲜果订阅本站 通过抓虾订阅本站
  • 通过QQ邮箱订阅本站 通过Yahoo订阅本站 通过有道订阅本站

Search

最新评论及回复

最近留言

网站分类

Powered By Z-Blog 1.8 Walle Build 91204 Designed by Han'space

Copyright @2009-2024 All Rights Reserved. 粤ICP备14028160号-1

Powered By Z-Blog 1.8 Walle Build 91204
Copyright @2009-2024 All Rights Reserved.