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开发者工具的介绍。