Google_hrome_开发人员工具详解.doc

Google Chrome 浏览器开发人员工具，让网页开发变得更轻松 无论是 IE 6/7 的 Internet Explorer Developer Toolbar 或者是 IE 8 自带的 Developer Tools，还是 Firefox 的 Firebug ，以及 Safari 的 Web Inspector 和 Opera 的 Dragonfly，他们的宗旨只有一个——帮助程序员方便、更高效地进行网页开发。 作为浏览器中生力军，Google Chrome 浏览器 (4.0及以上版本) 也自带了丰富的开发人员工具，让您可以随时随地对任何网页的 CSS、 HTML 和 JavaScript 进行实时编辑、调试以及监控。 Google Chrome 浏览器开发人员工具不仅仅能帮助您诊断、修复在网页加载、脚本执行以及页面呈现中出现的问题，还可以帮助您最大限度地了解您的网页或网络应用程序对CPU以及内存的使用情况。 本篇教程将从以下几部分系统地讲解如何使用 Google Chrome 浏览器开发人员工具来帮助您的开发： 准备工作 如何使用元素 (Elements) 面板 如何使用资源 (Resources) 面板 如何使用脚本 (Scripts) 面板 如何使用时间轴 (Timeline) 面板 如何使用剖析 (Profiles) 面板 如何使用存储 (Storage) 面板 如何使用审计 (Audits) 面板 如何使用 JavaScript 控制台 (Console) 准备工作 要开始使用开发人员工具，请先下载 Google Chrome 浏览器。（如果您想试用最新版本的的开发人员工具，可以下载开发版或测试版（英文网页）Google Chrome 浏览器。）在 Google Chrome 浏览器安装完成后，您可以打开自己感兴趣的网页或网络应用程序，然后通过下面任何一种方式进入开发人员工具： 点击位于浏览器用户界面右上角的“页面”下拉菜单 ，然后选择“开发人员”→“开发人员工具”。 右键点击网页上的任一元素，在弹出菜单中选择“审查元素”。 在 Windows 或 Linux 操作系统上，使用 Ctrl+Shift+I 快捷键打开开发人员工具（或使用 Ctrl+Shift+J 直接进入 JavaScript 控制台）。 在 Mac 上，使用 Command+Option+I 快捷键打开开发人员工具（或使用 Command+Option+J 直接进入 JavaScript 控制台）。 现在您应该已经看到开发人员工具的窗口了吧？在窗口的最上方的工具栏里排列着 8 个图标，分别对应不同的功能，每一个图标点击后都会打开相应的调试面板，帮助您获取各种不同的信息，如 DOM 树、资源占用情况、页面相关的脚本等。通过 Ctrl+[ 和 Ctrl+] 键，可以在这些项之间进行切换。工具栏最右方还提供了一个搜索框，方便在当前面板中进行搜索。 ? 工具窗口下部的按钮可以让调试窗口停靠到主窗口内，切换 JavaScript 控制台状态，以及其它一些功能。当然您也可以使用 Esc 键来更快地切换 JavaScript 控制台状态。直接点击控制台图标会使控制台调试界面会占据了整个开发工具窗口。窗口右下角显示的是错误和警告计数，点击它们也会打开控制台。 ? 接下来的单元，让我们一起来一一分解这些图标所对应面板具有的强大功能吧！ 元素（Elements）面板 在元素（Elements）面板中，可以看到整个页面的 DOM 树结构和每个元素的所有属性，同时也可以实时地修改这些元素及其属性，并可以实时看到修改后的效果。 我们这里以 Google 简体中文首页为例，鼠标右键单击“ Google 搜索” 按钮，选择“审查元素”，您会看到如下的窗口界面（注：此处使用的内嵌工具窗口模式，如您的工具窗口为独立窗口模式，可通过点击窗口左下方的“停靠” 图标 将其变为内嵌模式）： ? 在工具窗口右侧，显示的是被选元素的样式信息，如有兴趣，可以尝试通过双击现有属性来修改该元素的 style 属性或应用的某个选择器中的属性值，也可以通过取消勾选的方式去掉一些属性，同时观察页面的实时变化。那怎样给现有的元素或者选择器增加一个属性值呢？不用着急，鼠标双击您所想修改的元素的 element.style 部分或者它应用的选择器的空白部分（如下图所示），即可添加属性。需要注意的是，添加任何属性都必须以分号结束。 ? 拖动工具窗口最右侧的滚动条，在展开的 Styles 模块下方还有 Metrics、Properties、Event Listeners 几大模块。Metrics 模块以图形方式展示出左侧面板中选中元素的盒模型并标出了各部分