Google_Chrome_开发人员工具详解VIP专享

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 直接进入 Jav aScript 控制台）。 现在您应该已经看到开发人员工具的窗口了吧？在窗口的最上方的工具栏里排列着 8 个图标，分别对应不同的功能，每一个图标点击后都会打开相应的调试面板，帮助您获取各种不同的信息，如 DOM 树、资源占用情况...