GoogleChrome浏览器开发人员工具.docx

谷歌 Chrome 浏览器开发人职员具，让网页开发变得更轻松
不管是 IE 6/7 Internet Explorer Developer Toolbar 或是 IE 8 自带 Developer Tools，还是 Firefox Firebug ，和 Safari Web Inspector 和 Opera Dragonfly，她们宗旨只有一个——帮助程序员方便、更高效地进行网页开发。
作为浏览器中生力军，谷歌 Chrome 浏览器 () 也自带了丰富开发人职员具，让您能够随时随地对任何网页 CSS、 HTML 和 JavaScript 进行实时编辑、调试和监控。
谷歌 Chrome 浏览器开发人职员具不仅仅能帮助您诊疗、修复在网页加载、脚本实施和页面展现中出现问题，还能够帮助您最大程度地了解您网页或网络应用程序对CPU和内存使用情况。
本篇教程将从以下几部分系统地讲解怎样使用 谷歌 Chrome 浏览器开发人职员具来帮助您开发：
准备工作
怎样使用元素 (Elements) 面板
怎样使用资源 (Resources) 面板
怎样使用脚本 (Scripts) 面板
怎样使用时间轴 (Timeline) 面板
怎样使用剖析 (Profiles) 面板
怎样使用存放 (Storage) 面板
怎样使用审计 (Audits) 面板
怎样使用 JavaScript 控制台 (Console)
准备工作
要开始使用开发人职员具，请先下载 谷歌 Chrome 浏览器。（假如您想试用最新版本开发人职员具，能够下载开发版或测试版（英文网页）谷歌 Chrome 浏览器。）
在 谷歌 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 树结构和每个元素全部属性，同时也能够实时地修改这些元素及其属性，并能够实时看到修改后效果。
我们这里以 谷歌 简体汉字首页为例，鼠标右键单击“ 谷歌 搜索” 按钮，选择“审查元素”，您会看到以下窗口界面（注：此处使用内嵌工具窗口模式，如您工具窗口为独立窗口模式，可经过点击窗口左下方“停靠” 图标 将其变为内嵌模式）：
 
在工具窗口右侧，显示是被选元素样式信息，如有爱好，能够尝试经过双击现有属性来修改该元素 style 属性或应用某个选择器中属性值，也能够经过取消勾选方法去掉部分属性，同时观察页面实时改变。那怎样给现有元素或选择器增加一个属性值呢？不用着急，鼠标双击您所想修改元素 部分或它应用选择器空白部分（以下图所表示），即可添加属性。需要注意是，添加任何属性全部必需以分号结束。
 
拖动工具窗口最右侧滚动条，在展开 Styles 模块下方还有 Metrics、Properties、Event Listeners 几大模块。Metrics 模块以图形方法展示出左侧面板中选中元素盒模型并标出了各部分具体数值，在调试页面布局问题时，这么展示方法往往更直观、更清楚。
 
向上拖动工具窗口中部