记忆盒子

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

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

Chrome的开发者工具比Firefox的用户体验更好

作者:Kaka    时间:2013-11-27 15:3:16    浏览:    评论:1

      上一篇日志讲了如何利用Firefox自带的Web开发者工具分析网页,知道了Firefox网络分析器的强大,不过,自从我用了Chrome的开发者工具后,发现Firefox存在一些用户体验的问题,而Chrome在用户体验方面做得更为出色些。

      如何使用Chrome开发者工具

      跟Firefox一样,Chrome的开发者工具也是自带的,不需要安装扩展插件程序。而调用也非常简单,操作如下图1所示(自定义及控制->工具->开发者工具):

图1:Chrome开发者工具

图1:Chrome开发者工具

      打开后界面显示如下图2:

图2:Chrome开发者工具

图2:Chrome开发者工具

      Chrome开发者工具,界面是灰白背景,看起来很简单不华丽,没有Firefox的web开发者工具界面酷,这应该是继承了Google一贯的低调风格吧。

      不过,从统计的项目来看,这款工具包含的内容是非常丰富和专业的。而由于是英文界面,可能某些用户不太习惯,不知有无汉化版的,我没有查究过。

      如何使用Chrome开发者工具分析网页

      首先打开该工具,把标签切换到“Network”,如下图3:

 图3:Chrome网络分析器

图3:Chrome网络分析器

      然后打开网页时,该分析器里就会自动显示网页各元素的请求情况,如下图4所示:

图4:Chrome网络分析器

图4:Chrome网络分析器

      Chrome的网络分析器直接在界面上显示的项目比Firefox的Web开发者工具丰富得多,有Name(文件名)、Method(方法)、Status(状态)、Type(文件类型)、Initiator(创始者)、Size(文件大小)、Time(耗时)、Timeline(时间线)。

      值得一提的是,这里比Firefox多了3个显示项目,分别是Initiator(创始者)、Status(状态)和Time(耗时),我觉得这几个都很重要。尤其是Status(状态)和Time(耗时),通过Status(状态)可以立即看出网页里哪些文件是什么样的请求状态,尤其是当我们要找出404状态即不存在的文件也即是死链时,这个项目就非常有用,放在列表里,一目了然,而Firefox要点击文件进去才可知道这个文件的访问状态,这明显很费时间。而Time(耗时)这个参数也非常重要,对分析网页非常有用处,通过它可以立即知道各文件的访问时间是多少,所以这个项目放到列表里更好。所以我觉得Firefox在用户体验上没有Chrome好。

Tags: Chrome  Firefox  

加入本站QQ群(312716741),交流分享网站建设、优化、SEO技术。。。

 

上一篇: 如何利用Firefox自带的Web开发者工具分析网页
下一篇: 百度外链分析:纯文本链接也算是外链【有图为证】

发表评论:

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

订阅博客                   QQ交流群(312716741)

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

Search

最新评论及回复

最近留言

网站分类

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

Copyright @2009 All Rights Reserved. 粤ICP备09073737号

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