Introduction to Chrome Developer Tools——阅读笔记

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

1. 简介

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

（2）Chrome开发者工具（作者这里以Chrome 5为例）目前包括8类功能，分别是：

1. 元素（Elements）：该工具帮助我们查看原始的HTML、CSS和DOM，并且可以实时修改它们。
2. 资源（Resources）：该工具可以让我们了解网页从服务器请求了哪些组件，由此花费的时间和占用的带宽，而且可以查看每条资源的HTTP request和HTTP response的头部。如果我们希望加快页面加载的速度，我们可以通过分析这一工具中提供的信息来考虑解决方案。
3. 脚本（Scripts）：该工具中我们可以看到网页所调用的js文件的列表，还为我们提供了多功能的js调试器。
4. 时间轴（Timeline）：该工具可以让我们对加载时间和速度有更进一步的分析，我们可以详细深入了解浏览器花费多少时间来处理DOM事件、渲染页面布局以及绘制窗口。
5. 概述（Profiles）：该工具帮助我们捕捉和分析js脚本的性能，并且找出从何处进行优化。
6. 存储（Storage）：该工具可以追踪、查询和调试本地浏览器存储的内容。
7. 审计（Audits）：该工具可以分析页面加载情况，并提供优化建议。
8. 控制台（Console）：该工具提供了完备功能的控制台，开发者可以输入任意js代码，也可以编程与页面交互。

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

（3）启动Chrome开发者工具的方法；

1. 在页面上右键，在下拉菜单中选择“审查元素（Inspect Element）”
2. 使用快捷键：
   • Windows & Linux：Ctrl+Shift+J
   • Mac：Command+Option+J
3. 从菜单中打开：
   • 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标签中右侧的菜单从多个角度展示了网页的信息：

1. Computed Style：元素经过计算后的最终样式
2. Styles：设置的元素样式
3. Metrics：元素的盒模型
4. Properties：元素的所有属性
5. DOM Breakpoints：断点
6. Event Listeners：事件侦听器

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

3. Resources标签（及Network标签）

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

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

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

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

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

说明：由于只找到这篇文章的Part1部分，所以对Chrome开发者工具的介绍就到此结束了。今后将继续学习其他文章中对Chrome开发者工具的介绍。