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

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

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

如何使用Chrome开发者工具

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

图1:Chrome开发者工具

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

图2:Chrome开发者工具

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

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

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

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

图3:Chrome网络分析器

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

图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好。