Google_Chrome_开发人员工具详解要点.pdf

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 控制台状态。 直接点击控制台图标会使控制台调试界面会占据了整个开发工具窗口。