Google Chrome浏览器开发人员工具

准备工做

要开始使用开发人员工具，请先下载 Google Chrome 浏览器。在浏览器安装完成后，您能够打开本身感兴趣的网页或网络应用程序，而后经过下面任何一种方式进入开发人员工具：

l  点击位于浏览器用户界面右上角的“页面”下拉菜单

l  右键点击网页上的任一元素，在弹出菜单中选择“审查元素”。

l  在 Windows操做系统上，使用 Ctrl+Shift+I 快捷键打开开发人员工具（或使用 Ctrl+Shift+J 直接进入 JavaScript 控制台）。

如今您应该已经看到开发人员工具的窗口了吧？在窗口的最上方的工具栏里排列着 8 个图标，分别对应不一样的功能，每个图标点击后都会打开相应的调试面板，帮助您获取各类不一样的信息，如 DOM 树、资源占用状况、页面相关的脚本等。经过 Ctrl+[ 和 Ctrl+] 键，能够在这些项之间进行切换。工具栏最右方还提供了一个搜索框，方便在当前面板中进行搜索。

工具窗口下部的按钮可让调试窗口停靠到主窗口内，切换 JavaScript 控制台状态，以及其它一些功能。固然您也可使用 Esc 键来更快地切换 JavaScript 控制台状态。直接点击控制台图标会使控制台调试界面会占据了整个开发工具窗口。窗口右下角显示的是错误和警告计数，点击它们也会打开控制台。

       接下来的单元，让咱们一块儿来一块儿分解这些图标所对应面板具备的强大功能吧！

1.   元素（Elements）面板

在元素（Elements）面板中，能够看到整个页面的 DOM 树结构和每一个元素的全部属性，同时也能够实时地修改这些元素及其属性，并能够实时看到修改后的效果。咱们这里以 Google 简体中文首页为例，鼠标右键单击“ Google 搜索” 按钮，选择“审查元素”，您会看到以下的窗口界面（注：此处使用的内嵌工具窗口模式，如您的工具窗口为独立窗口模式，可经过点击窗口左下方的“停靠” 图标 将其变为内嵌模式）：

在工具窗口右侧，显示的是被选元素的样式信息，若有兴趣，能够尝试经过双击现有属性来修改该元素的 style 属性或应用的某个选择器中的属性值，也能够经过取消勾选的方式去掉一些属性，同时观察页面的实时变化。那怎样给现有的元素或者选择器增长一个属性值呢？不用着急，鼠标双击您所想修改的元素的 element.style 部分或者它应用的选择器的空白部分（以下图所示），便可添加属性。须要注意的是，添加任何属性都必须以分号结束。

       拖动工具窗口最右侧的滚动条，在展开的 Styles 模块下方还有 Metrics、Properties、Event Listeners 几大模块。Metrics 模块以图形方式展现出左侧面板中选中元素的盒模型并标出了各部分的详细数值，在调试页面布局问题时，这样的展现方式每每更直观、更清晰。

       向上拖动工具窗口中部的滚动条，找到“图片”元素，点击后，可看到在页面上相应的元素被选中，这时咱们将工具窗口右侧的滚动条拖到最下方，展开 Event Listeners 中个各项，可看到这个连接（元素）的相关事件监听函数。经过 Event Listeners 项右侧的“齿轮”图标，您能够选择是只显示选中节点上的注册的事件，仍是显示整个事件流中全部注册的事件。

点击工具窗口左下角的放大镜图标 可进入“审查模式”，选中后，放大镜变为蓝色，这时随鼠标在主窗口的页面中的移动，你会看到相应的元素被高亮标识出来，点击后，工具窗口会显示选中元素的 DOM 节点信息。另外值得注意的一点是，在 Google Chrome 浏览器开发人员工具里，全部脚本和样式表是按语法着色的，调试起来更加清晰。

2.   资源（Resources）面板

在资源面板中，能够查看到请求的资源状况，包括CSS、JS、图片等内容，同时还能够查看到存储相关的如Cookies、HTML5的Database和LocalStore等，你能够对存储的内容编辑和删除。

3.   网络（NetWork）面板

网络标签页对于分析网站请求的网络状况、查看某一请求的请求头和响应头还有响应内容颇有用，特别是在查看Ajax类请求的时候，很是有帮助。

每一个水平的棒状图示表明一个资源占用网络的时间，而在每一个棒状图示的左侧颜色较浅的部分表明延迟时间（Latency），即从向服务器发出请求到服务器第一次响应之间的时长。鼠标移至棒状图示上，可看到每一个部分所花销的精确时间。图中蓝色和红色的两条垂直线分别表明 DOMContent 加载完成和 Load 事件被触发的时间点。

4.   脚本（Scripts）面板

在脚本面板里，您能够方便的调试 JavaScript 代码。下面的图中标注了在脚本面板里的几个主要功能：

①     单步调试，不进入函数体内部
② 单步调试，进入函数体内部
③ 跳出当前函数

设置断点后按 F5 刷新，页面会在执行到断点语句处停下，您能够在右侧添加所需观察的变量，来进行跟踪变量值的变化，也可查看堆栈调用状况及全局变量和函数的信息，也能够将鼠标移到感兴趣的变量名上直接查看此变量当前的值。

5.   时间轴（Timeline）面板

时间轴面板为您的网页及网络应用程序作了一个详细的性能分析，告诉您载入页面的时间究竟花在哪些地方。从加载资源到解析 JavaScript 脚本、计算样式表及页面渲染的全部步骤，您均可以在这里看到它们消耗的时间和内存。打开时间轴面板，您会看到这样的界面：

6.   剖析（Profiles）面板

剖析面板由CPU 分析器和堆分析器组成，它可以帮助您了解网页和网络应用程序的执行时间和内存使用状况。

l  CPU 分析器显示的是 JavaScript 脚本里的每一个函数分别占用了多少执行时间

l  堆分析器显示每一个 JavaScript 对象所使用的内存大小

7.   审计（Audits）面板

审计面板是在 Google Chrome 浏览器 5.0 中新引入的模块。它能够帮助您检查网页性能和网络利用率。打开审计面板，您将看到这样的界面：

您可选择所需检测的项目或选择“检查所有”（“ Select All ”），而后点击“运行”（“ Run ”）按钮，开发人员工具将为您的网页生成一份详细的审计报告并给出关于网络利用及性能优化方面的建议。

8.   JavaScript 控制台（Console）

JavaScript 控制台可与其它面板联合使用，您能够借助它来审查 DOM 元素、调试 JavaScript 代码、查看 HTML 解析错误等。