简介
Google Chrome 是一款功能丰富且功能强大的网络浏览器，引领着网络应用的无限可能。Google 一直致力于为最终用户提供非常快速、非常稳定且功能丰富的浏览体验。Google 还确保像您这样的开发者能够获得良好的 Chrome 使用体验。Chrome 和 Safari 捆绑提供的开发者工具可让网络开发者和程序员深入到浏览器及其 Web 应用的内部。
开发者工具是开源 Webkit 项目的一部分。本文中的大部分讨论内容均适用于 Google Chrome 和 Safari。不过，这些屏幕截图是使用 Google Chrome 6 截取的，因此您的浏览器可能会略有不同。
在本文中，我们将概括介绍开发者工具，并指出其中最受欢迎和最有用的功能。我们的目标受众群体是那些不了解或尚未研究开发者工具的网络开发者。不过，我们确信，即使您是经验丰富的 Web 开发者，您也能从中获益。
如果您的开发者工具实例与本文中的屏幕截图不完全相符，我们建议您升级到版本 5，以便您可以跟随其中的说明操作，并获得使用本文所述所有功能的权限。
概览
总的来说，“开发者工具”视图中主要有八组工具，而且这些功能会随着每个版本的发布而不断扩展。Chrome 5 现在提供元素、资源、脚本、时间轴、个人资料、存储、审核和控制台等功能。
元素
通过元素工具，您能以浏览器查看网页的方式查看网页。也就是说，您可以使用元素工具查看原始 HTML、原始 CSS 样式和文档对象模型，并进行实时操作。
资源
使用资源工具可以了解您的网页或应用正在从网络服务器中请求哪些组件、这些请求需要多长时间以及需要多少带宽。您还可以查看每个资源的 HTTP 请求和响应标头。“资源”工具是帮助您加快网页加载速度的理想工具。
脚本
要深入查看网页的 JavaScript，您需要使用脚本工具。您可以在这里找到网页所需的脚本列表以及功能齐全的脚本调试程序。您甚至可以即时更改 JavaScript！
时间表
对于高级的时间和速度分析，时间轴工具可让您深入了解各种 Chrome 后台活动。您可以了解浏览器要花多长时间处理 DOM 事件、呈现网页布局和绘制窗口。
个人资料
个人资料工具可以帮助您捕获并分析 JavaScript 脚本的效果。例如，您可以了解哪些函数的执行时间最长，并准确找出优化位置。
存储
与简单的 Cookie 相比，现代 Web 应用需要更多持久性，而存储工具可帮助您跟踪、查询和调试本地浏览器存储。此工具可以显示和查询存储在本地数据库、本地存储空间、会话存储空间和 Cookie 中的数据。
审核
审计工具就像是您身边的专属网络优化顾问。此工具可在网页加载时分析网页，并提供建议和优化方案以缩短网页加载时间和提高用户感知到的（以及实际的）响应速度。
控制台
最后但同样重要的一点是，开发者工具提供了一个功能齐全的控制台。您可以从控制台输入任意 JavaScript，然后以程序化方式与网页进行交互。
启动
在 Chrome 中启动开发者工具非常简单。
对于任何操作系统，您只需右键点击网页中的任意元素，然后从上下文菜单中选择“检查元素”选项即可。这将打开开发者工具，并直接跳转到您点击的元素。
要查看实际效果，请在 Chrome 浏览器中访问 http://www.google.com。右键点击 Google 徽标，您将会看到以下选项：
选择“检查元素”将打开开发者工具，如下所示：
请注意，开发者工具在“Elements”标签页中打开时是如何自动展开细目并突出显示 Google 徽标的 <img> 标记时的。如果您想知道哪个 HTML 生成了特定的页面元素，此工具会非常有用。
您还可以使用简单的键盘快捷键打开开发者工具。根据您的操作系统，尝试执行以下操作：
- 在 Windows 和 Linux 上，选择
Control-Shift-J键。 - 在 Mac 上，选择
Command-Option-J键。
最后，您可以从浏览器主菜单中选择打开相应工具。
在 Mac 上，从主应用菜单栏中选择“查看”、“开发者”、“开发者工具”。
在 Windows PC 上，您应使用右上角的“页面”菜单，然后依次选择“开发者”>“开发者工具”。
既然您已经打开并准备好了开发者工具，我们先来了解一下 Google 首页上的元素。
元素
开发者工具中的第一个标签页是“元素”。这是您用来查看网页结构的窗口，该窗口会以浏览器所见的方式呈现。
DOM 浏览
当您需要标识网页某些部分的 HTML 代码段时，会经常访问“元素”标签页。例如，您可能想知道图片是否具有 HTML id 属性，以及该属性的值是什么。
“元素”标签页有时是“查看网页源代码”的更好方式。在“元素”标签页内，页面的 DOM 格式正确，可以轻松地向您显示 HTML 元素及其祖先和后代。在很多时候，您访问的网页的 HTML 简直或者非常糟糕，这会导致难以查看网页的结构。“元素”标签页是查看网页真实底层结构的解决方案。
例如，以下是 Google 首页“查看来源”的输出内容。
上述源代码已经过优化和缩减，很难阅读。此格式对客户端和服务器都很合适，但对开发者来说很难！
相反，如果您想查看网页的源代码，可以使用“元素”标签页来查看格式整齐、语法突出显示的元素层次结构。
通过“元素”标签，您还可以浏览、交互，有时甚至更改页面上任何元素的样式、指标、属性和事件监听器。
样式浏览
CSS 的级联特性使得“元素”标签页中的“样式”浏览器非常有用。有时，样式会折叠到一起，出乎意料的视觉效果。了解浏览器应用于元素的样式规则有助于您调试此类问题。
点击“Elements”标签页中的任意元素将显示附加到该元素的所有样式。
在上面的屏幕截图中，您可以看到，我们能够了解所有正在应用的样式属性。例如，内边距直接来自 <img> 元素的样式属性。不过，宽度和高度均来自它们各自的原生属性。有趣的是，您可以看出还有样式也从 <center> 标记、<body> 标记等继承。
能够看到单个样式及其来源固然很好，但查看经过计算并应用到元素上的最终样式集也非常有用。您可以通过选择“Computed Style”菜单来查看最终效果，如以下屏幕截图所示。
接下来，我们将简要了解一下“元素”标签页提供的其他功能。我们将在以后的文章中更详细地介绍以下内容。
盒子模型
您可以通过选择“指标”菜单来查看应用于选定元素的框模型：
元素属性
您只需选择“属性”菜单，便可查看该元素的所有属性，就如同 JavaScript 和 DOM 一样：
事件监听器
最后，通过“事件监听器”菜单，您甚至可以查看附加到元素的事件监听器，或者通过事件监听器传递的事件监听器：
摘要
“元素”标签提供了许多功能，后续的文章将深入介绍各个菜单。
如果您想查看网页在浏览器中的呈现效果，则应使用“元素”标签。通过“元素”标签页可以快速轻松地解决诸如“此样式是如何计算的？”或“哪些 HTML 标记生成了此组件？”之类的常见问题。
“元素”标签页就像超级“查看来源”，可非常清晰地查看您的网页。
研究相应网页后，您可能想知道 HTML、CSS 和图片最初是如何添加到这些网页的。下文介绍的“资源”标签显示了客户端浏览器和网络服务器如何通信以发送这些资源。
资源
应用正常运行后，下一步应该是优化网络和带宽性能。您应着眼于尽可能快速高效地将应用从服务器转移到客户端。您的用户会感谢您快速加载网页，节省带宽和服务器资源费用，而且您在 Google 搜索结果排名（现在会考虑网站速度）中的得分也会更高。
开发者工具中的“资源”标签页是一个显示网络服务器与客户端浏览器之间通信的窗口。您可以看到浏览器请求的所有资源（总是很出人意料！）、从服务器接收资源所需的时间，以及在传输过程中占用了多少带宽。
讽刺的是，运行“资源”标签页会影响网页加载性能，因此它默认处于停用状态。首次使用该功能时，您需要为正在查看的网页启用该功能。
建议您将“仅针对此会话启用”默认处于选中状态，以免出现不必要的性能损失。在您点击“启用资源跟踪”后，页面会重新加载，而开发者工具会监控并显示从服务器发送的资源。
下面的屏幕截图显示了 Google 首页所需的并且已加载的资源。
此屏幕上有很多信息，那我们就逐条进行阅读吧。
默认行为是向您显示为网页请求和加载所有资源所用的时间。向下滚动“资源”列表可能会让您感到惊讶，因为您可能不知道客户端单独发出了多少请求。来自客户端的大量请求可能会严重影响性能。清楚地了解具体请求是优化和最终减少资源的第一步。
如果您只对图片或样式表感兴趣，可以直接使用主标签窗口下的菜单对资源类型进行过滤。
您还将了解请求资源的顺序。通过时间轴显示，您可以更好地了解网页上某些元素的显示时间晚于其他元素的原因。
大致了解所有请求的资源以及它们如何组成整个请求时间表后，您需要深入查看各个资源。
如果您发现每次访问该网页时都会请求一些资源，则表示您的缓存标头配置不正确。您可以通过点击左侧列表中的资源来查看资源的所有标头。
使用“标头显示”功能确保已设置预期的 HTTP 响应代码并提供相应的标头。例如，如果资源很少或从未更改，则您的服务器应为很久以后设置 Expiration 标头。这将告知浏览器在该日期之前不应再次请求该资源。这样可减少网页所需的 HTTP 连接数，从而加快网站速度。
摘要
“资源”标签页还包含许多其他功能，我们将在以后的文章中介绍相关内容。
通过“资源”标签页，可以了解客户端浏览器与网络服务器的通信方式。利用这些信息（包括请求时间、请求大小和请求顺序），您可以进行智能优化，以减少服务器负载、成本、提高速度并改善用户体验。
速度对您的网站、用户和搜索引擎都非常重要。在减少资源的数量和大小，并且进行相应的 HTTP 会话后，下一步就是调查和优化在网页中运行的脚本。幸运的是，“脚本”标签（我们接下来会介绍）就可以做到这一点。
其他资源
如需详细了解开发者工具，我们建议您阅读以下内容：
当然，请继续关注 html5rocks.com 了解本文的第 2 部分，以及许多其他精彩的 HTML5 和 Chrome 内容。