[原文]Google Chrome Developer Tools Tutorial
[译文]Google Chrome Developer Tools 中文教程(1)
Google Chrome开发者工具包帮助你诊断和修复页面及应用中加载,执行与布局的问题。该工具还可以帮助确保页面或应用使用尽可能小的cpu和内存。
通过本套教程你将熟悉Google Chrome 开发者工具包。该教程被分为一下几个部分：
开始前
如果你是一个页面开发工程师，并且想获取最新版本的开发者工具包，你应该使用来自开发者频道的Google Chrome。
如何进入开发者工具包
为进入开发者工具包，打开一个网页或网页应用。然后选择以下一种执行方式:
- 选择浏览器右上角的Page menu
,然后选择 Developer -> Developer Tools。
- 右击页面上的一个元素并选择 Inspect element。
- 在Windows和Linux上，按 Control-Shift-J组合键。
- 在Mac上，按Command-Option-J组合键。
注意：在最近版本的Google Chrome中，Control-Shift-J会打开开发者工具包并默认选择控制台，而Control-Shift-I（大写i）仅仅打开开发者工具包窗口。
开发者工具包窗口
开发者工具包以任务为向导分组,并在窗口的顶部工具条上以不同的Icon来表示。工具条上的每一项和与之对应的面板可以让你在页面或应用的特定类型下操作DOM elements，resources，和scripts。工具条同时还提供来一个搜索框以便你搜索当前面板。
可以使用Contros-[和Control-]快捷键在不同的面板中切换。
开发者工具包的底部可以停靠在主窗口上，并允许切换控制台。你也可以使用Escape键来切换控制台。任何错误或警告的数量都显示在右下角。点击这块区域同样可以打开控制台。
如何使用Element面板
在Element面板中可以看到DOM树中的一切，并能审查和快速编辑DOM元素。
按以下步骤可以浏览Element面板:
-
打开Google Closure hovercard 演示页面。
-
按本教程如何进入开发者工具包中的描述，打开开发者工具包。
-
如果Element面板没被选中，那么请选中它。就能看到类似下面的窗口：
主窗口显示页面上的HTML元素，右边栏显示样式，量度（metrics），属性，和事件监听.
-
行内脚本和样式会高亮显示。如：选择<script>标签,就能看到类似下面的窗口：
-
点击放大镜图标以激活选择模式。返回Google Closure hovercard 页面，点击左上角的卡片Tom Smith。因为当前正处于选择模式，所以Elements面板中会高亮显示相应节点及其样式，然后关闭选择模式。可以看到类似下面的窗口：
-
在主窗口中选择<p>，可以看到类似下面的窗口:
该界面可以添加，编辑和删除所选DOM元素的属性-当前的<p>元素刚好没有任何属性。在高亮的行上输入或黏贴一些属性到DOM元素上。删除文字则可以删除属性。
- 在主窗口中通过双击选中的节点或在选中的节点上按Enter来编辑节点属性。按Tab将在各个可编辑的属性上跳转。
- 通过编辑? = ""占位符给节点添加新的属性。
- 通过Del删除所选节点。
-
鼠标滑过右边栏中的.anchor，可编辑的样式将出现一些复选框，这些复选框可以禁用或激活样式属性。应该可以看到类似下面的窗口：
-
双击一个样式属性（非用户代理）就可以编辑或删除它，如：双击margin:20px。可以看到类似下面的窗口：
输入或者黏贴一个或多个属性将在样式规则中添加这些属性。如果编辑的属性值是一个数字，就可以用Up或者Down来改变数值。按住Alt/Option键将增加或减少0.1,按住Shift键将增加或减少10。可以通过双击左下角的空白区域或通过黏贴以分号分割的属性来添加更多的属性。编辑样式选择器只需双击选择器名称。还可以使用齿轮菜单来添加新的样式选择器，它位于Event Listener的右边。（译者注：4.0.294.22 Linux版不能使用）
-
选择右边栏中的Event Listeners，可以看到类似下面的窗口：
所选节点的事件监听根据捕获和冒泡阶段发生的顺序显示。这提供了最准确和有用的信息。事件监听以类型划分。如果一个节点同时存在onclick和onmouseover事件，它们将出现在不同的面板。当然你也可以使用齿轮菜单进行过滤。可以只查看注册在所选节点上的监听，或整个事件流。
-
在右边栏选择Properties面板，然后展开Element。可以看到类似下面的窗口：
在这里，可以编辑元素的DOM属性。如果允许，删除所有的文字将删除这些属性。
-
打开右边栏的Metrices面板，然后双击一个度量值。可以看到类似下面的窗口:
可以编辑任何绝对，相对或固定的CSS盒模型。
-
在搜索框中输入document.write。可以看到类似下面的窗口：
除了纯文本，Elements面板还支持XPath和CSS选择符来查询。所有搜索的结果都会在DOM树中高亮显示，第一个匹配的对象将会选中。
开发者工具包还支持与Elements面板互动的控制台API。使用Esc打开控制台。尝试输入下面的命令：
- $("id")-在控制台中抛出”id“和元素id相同的DOM。
- $0-包含最近搜索的节点。可以将节点抛出到控制台显示或在控制台表达式中使用。
- $1...$5-包含历史搜索的节点。
- inspect(node)-在Elements面板中选中给定的节点。
- dir(node)-以javascript对象的形式将节点抛出到控制台。
- dirxml(node)-以HTML树的形式将节点抛出到控制台。
