您的位置:首页 > 运维架构

Introduction to Chrome Developer Tools——阅读笔记

2013-01-16 14:38 92 查看
最近对Chrome开发者工具十分关注,因此学习了不少相关文章。这里是HTML5ROCKS上的文章Introduction to Chrome Developer Tools的阅读笔记。注:下面的内容不是一对一地翻译,而是摘录和个人学习体会的结合。

1. 简介

(1)Chrome开发者工具虽然名为“Chrome”,但其实它不仅用于Chrome,也可以用于Safari。这个开发者工具是开源项目Webkit的一部分。

(2)Chrome开发者工具(作者这里以Chrome 5为例)目前包括8类功能,分别是:

元素(Elements):该工具帮助我们查看原始的HTML、CSS和DOM,并且可以实时修改它们。

资源(Resources):该工具可以让我们了解网页从服务器请求了哪些组件,由此花费的时间和占用的带宽,而且可以查看每条资源的HTTP request和HTTP response的头部。如果我们希望加快页面加载的速度,我们可以通过分析这一工具中提供的信息来考虑解决方案。

脚本(Scripts):该工具中我们可以看到网页所调用的js文件的列表,还为我们提供了多功能的js调试器。

时间轴(Timeline):该工具可以让我们对加载时间和速度有更进一步的分析,我们可以详细深入了解浏览器花费多少时间来处理DOM事件、渲染页面布局以及绘制窗口。

概述(Profiles):该工具帮助我们捕捉和分析js脚本的性能,并且找出从何处进行优化。

存储(Storage):该工具可以追踪、查询和调试本地浏览器存储的内容。

审计(Audits):该工具可以分析页面加载情况,并提供优化建议。

控制台(Console):该工具提供了完备功能的控制台,开发者可以输入任意js代码,也可以编程与页面交互。

注:在Chrome 23中的开发者工具里,“存储”被去掉,新增的是“网络(Network)”,另外“脚本”也被去掉,替换为“源文件(Sources)”。

(3)启动Chrome开发者工具的方法;

在页面上右键,在下拉菜单中选择“审查元素(Inspect Element)”

使用快捷键:

Windows & Linux:Ctrl+Shift+J

Mac:Command+Option+J

从菜单中打开:

Windows:工具->开发者工具

Mac:视图(View)->开发者(Developer)->开发者工具(Developer Tools)

注:在Windows上的Chrome 23中,Ctrl+Shift+J用于启动JavaScript控制台,而启动Chrome开发者工具的是Ctrl+Shift+I。所以不同版本的快捷键可能有所不同。

(4)Chrome开发者工具的某些标签的使用会影响到网页的性能,因此默认是关闭的。使用时需要打开。

2. Elements标签

为了提高网页性能,源代码通常会经过压缩等处理,这样的源代码对客户端和服务器端识别而言是件好事,但不利于程序员阅读。而Elements标签下,代码会以很规范的有层次的形式予以展现,并且对应语法部分也有高亮。在这一标签下,我们可以浏览页面的样式(Styles)、盒模型(Metrics)、属性(Properties)和事件侦听器(Event Listeners),并且也可以与它们进行交互和修改。



因为CSS具有级联这一特点,所以有时会发现元素并没有像我们预想的那种样式进行展示,这可能源于CSS中出现了冲突。这时我们就可以通过Styles观察对应元素所具有的样式,从而发现问题的所在。

Elements标签中右侧的菜单从多个角度展示了网页的信息:

Computed Style:元素经过计算后的最终样式

Styles:设置的元素样式

Metrics:元素的盒模型

Properties:元素的所有属性

DOM Breakpoints:断点

Event Listeners:事件侦听器

小结:Elements标签实际上让我们从浏览器的角度了解了网页。

3. Resources标签(及Network标签)

Resources标签帮助我们查看浏览器请求的所有资源,从服务器接收资源所耗费的时间,以及传输过程中所需要的带宽。在这篇文章中举例使用的Chrome开发者工具中的Resources标签包含很多功能,在随后的版本中被拆分到Resources标签和Network标签中。





通过Network标签下方的Documents、Images、Scripts等可以分类查看各个资源的加载时间、加载先后顺序等情况。也可以如下图所示查看单个资源的情况。



如果我们观察发现某些资源在每次访问页面的时候都会请求,那我们可能有必要将其缓存在本地。

点击每个资源都可以分别查看其头部(Header)信息。对于那些很久都不需要改变的资源,我们可以为其头部设置过期时间。



小结:Resources标签和Network标签让我们了解客户端浏览器与web服务器是如何进行交流从而传递资源的。

说明:由于只找到这篇文章的Part1部分,所以对Chrome开发者工具的介绍就到此结束了。今后将继续学习其他文章中对Chrome开发者工具的介绍。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: