Introduction to Chrome Developer Tools——阅读笔记

最近对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），并且也可以与它们进行交互和修改。