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