简介
Google Chrome 是一款功能丰富且强大的网络浏览器，开创了 Web 应用的先河。Google 一直在努力为最终用户提供非常快速、非常稳定且功能丰富的浏览体验。Google 还确保像您这样的开发者能够获得良好的 Chrome 使用体验。捆绑在 Chrome 和 Safari 中的开发者工具可让网站开发者和程序员深入到浏览器及其 Web 应用的内部。
开发者工具是开源 Webkit 项目的一部分。本文中的大多数讨论都适用于 Google Chrome 和 Safari。不过，这些屏幕截图是使用 Google Chrome 6 截取的，因此您的浏览器中可能会有细微差异。
在本文中，我们将简要介绍开发者工具，并指出其最常用和最实用的功能。我们的目标受众群体是尚不了解或尚未研究过开发者工具的 Web 开发者。不过，我们相信，即使您是经验丰富的 Web 开发者，也能从中学到一些技巧。
如果您的开发者工具实例与本文中的屏幕截图不完全一致，我们建议您升级到 5 版，以便跟随本文操作并使用本文中介绍的所有功能。
概览
总体而言，开发者工具包含八大工具组，并且随着每个版本的发布，其功能也在不断扩展。Chrome 5 现在提供“元素”“资源”“脚本”“时间轴”“配置文件”“存储”“审核”和“控制台”功能。
元素
借助“元素”工具，您可以以浏览器的视角查看网页。也就是说，使用“元素”工具，您可以查看原始 HTML、原始 CSS 样式和文档对象模型，并实时操作这两者。
资源
使用“资源”工具可了解您的网页或应用正在向网络服务器请求哪些组件、这些请求需要多长时间，以及所需的带宽量。您还可以查看每个资源的 HTTP 请求和响应标头。“资源”工具非常适合帮助您缩短网页加载时间。
脚本
如需深入了解网页的 JavaScript，您将使用“脚本”工具。您可以在此处找到该网页所需的脚本列表，以及功能齐全的脚本调试程序。您甚至可以动态更改 JavaScript！
时间轴
如需进行高级时间和速度分析，时间轴工具可让您深入了解 Chrome 的各种后台活动。您可以了解浏览器处理 DOM 事件、渲染页面布局和绘制窗口所需的时间。
分析文件
配置文件工具可帮助您捕获和分析 JavaScript 脚本的性能。例如，您可以了解哪些函数的执行时间最长，并找出需要优化的确切位置。
存储
现代 Web 应用需要比 Cookie 更持久的存储方式，而“存储”工具可帮助您跟踪、查询和调试本地浏览器存储空间。此工具可以显示和查询存储在本地数据库、本地存储空间、会话存储空间和 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 属性，以及该属性的值是什么。
有时，使用“元素”标签页“查看源代码”会更方便。在“Elements”标签页中，网页的 DOM 将采用良好的格式，以便您轻松查看 HTML 元素及其祖先和后代。您访问的网页通常会使用经过缩减的 HTML 或难看的 HTML，这会使您难以了解网页的结构。若要查看网页的实际底层结构，请使用“元素”标签页。
例如，以下是 Google 首页的“查看源代码”功能的输出。
由于经过优化和缩减，上述源代码难以阅读。这种格式对客户端和服务器很有用，但对开发者来说很难！
不过，如果您想阅读网页的源代码，请使用“元素”标签页查看经过美化且带有语法突出显示的元素层次结构。
您还可以通过“元素”标签页浏览、互动，有时甚至可以更改网页上任何元素的样式、指标、属性和事件监听器。
浏览样式
由于 CSS 的层叠特性，因此“元素”标签页中的“样式”浏览器非常有用。有时，样式会自行收起，并显示意外的视觉效果。了解浏览器正在向元素应用哪些样式规则有助于您调试此类问题。
点击“元素”标签页中的任何元素，系统就会显示附加到该元素的所有样式。
您会在上面的屏幕截图中看到，我们能够了解正在应用的所有样式属性。例如，内边距直接来自 <img> 元素的样式属性。不过，宽度和高度来自各自的原生属性。有趣的是，您可以看到，还有一些样式也从 <center> 标记、<body> 标记等继承而来。
虽然查看各个样式及其来源很有用，但查看计算后应用于元素的最终一组样式也很有用。您可以选择“计算样式”菜单查看最终产品，如下图所示。
接下来，我们将简要介绍“元素”标签页提供的其他功能。我们将在后续文章中详细介绍以下内容。
盒模型
您可以选择“Metrics”（指标）菜单，查看应用于所选元素的盒模型：
元素属性
您可以选择“Properties”菜单，以便查看元素的所有属性（就像 JavaScript 和 DOM 看到的一样）：
事件监听器
最后，您还可以通过“事件监听器”菜单查看附加到元素或通过元素传递的事件监听器：
摘要
您可以通过“元素”标签页使用许多功能，我们将在后续文章中详细介绍各个菜单。
如需查看网页在浏览器中的显示效果，您应使用“元素”标签页。通过“元素”标签页，您可以快速轻松地解答常见问题，例如“此样式是如何计算的？”或“哪些 HTML 标记生成了此组件？”
您可以将“元素”标签页视为超级“查看源代码”功能，以便深入了解网页。
在对网页进行调查后，您可能想知道 HTML、CSS 和图片是如何出现在网页上的。下文介绍的“资源”标签页会显示客户端浏览器和网络服务器如何通信以发送这些资源。
资源
应用正常运行后，下一步应优化网络和带宽性能。您应力求尽可能快速高效地将应用从服务器传输到客户端。网页加载速度快，用户会感激您，您还能节省带宽和服务器资源，并且在 Google 搜索结果排名中获得更高的得分（Google 现在会考虑网站速度）。
开发者工具中的“资源”标签页可让您了解 Web 服务器与客户端浏览器之间的通信。您可以查看浏览器请求的所有资源（这总是令人惊讶！），从服务器接收这些资源所需的时间，以及传输过程中使用的带宽。
具有讽刺意味的是，运行“资源”标签页会影响网页加载性能，因此它默认处于停用状态。首次使用此功能时，您需要为当前查看的网页启用此功能。
建议您选择默认的“仅在此会话中启用”，以免不必要地造成轻微的性能下降。点击“启用资源跟踪”后，页面将重新加载，开发者工具将监控并显示从服务器发送的资源。
以下屏幕截图显示了 Google 首页所需的资源以及为其加载的资源。
此屏幕上的信息很多，我们来逐一了解。
默认行为是显示请求和加载网页的所有资源所花费的时间。向下滚动“Resources”（资源）列表可能会让您感到惊讶，因为您可能不知道客户端发出了多少个单独的请求。来自客户端的大量请求可能会严重影响性能。了解系统请求的确切内容是优化和最终减少资源的第一步。
如果您只对图片或样式表感兴趣，可以使用主标签页窗口下方的菜单过滤资源类型。
您还将了解资源的请求顺序。通过时间轴显示，您可以更好地了解网页上的某些元素比其他元素显示得更晚的原因。
在概览了所有请求的资源以及它们如何构成整个请求时间轴后，您需要深入了解各个资源。
如果您发现每次访问网页时都会请求一些资源，则表示您的缓存标头配置不正确。点击左侧列表中的资源即可查看该资源的所有标题。
使用“标头”显示屏确保设置了预期的 HTTP 响应代码并提供了适当的标头。例如，如果资源很少或从不更改，您的服务器应将 Expires 标头设置为很久以后。这会告知浏览器，在该日期之前不应再次请求该资源。这样可以减少页面所需的 HTTP 连接数量，从而加快网站速度。
摘要
“资源”标签页还有许多其他内容，我们将在后续文章中介绍。
使用“资源”标签页可了解客户端浏览器如何与 Web 服务器通信。您可以利用这些信息（包括请求时间、请求大小和请求顺序）进行智能优化，从而降低服务器负载和费用，提高速度并提升用户体验。
速度对您的网站、用户和搜索引擎都非常重要。减少资源数量和大小，并发生适当的 HTTP 对话后，下一步是调查和优化网页中运行的脚本。幸运的是，下文将介绍的“脚本”标签页正可用于此目的。
其他资源
如需详细了解开发者工具，我们建议您参阅以下资源：
当然，请继续关注 html5rocks.com，以便了解本文的第二部分以及其他许多精彩的 HTML5 和 Chrome 内容。