【翻译】Chrome Developer Tools: Elements 面板

说明：本文对Chrome Developer Tools系列翻译文章的五篇

原文见https://developers.google.com/chrome-developer-tools/docs/elements

Chrome Developer Tools: Elements Panel

Elements 面板

The Elements panel lets you see everything in one DOM tree, and allows inspection and on-the-fly editing of DOM elements. You will often visit the Elements tabs when you need to identify the HTML snippet for some aspect of the page. For example, you may be curious if an image has an HTML id attribute, and what that attribute's value is.

Elements 面板让你能看到DOM树的所有事情，并且允许查看和在线修改DOM的元素。当你需要识别页面某些方面的片断，你会经常访问Elements标签页。例如，你可能好奇，一个图片有一个HTML id属性，那么属性值是什么呢。

The Elements panel is sometimes a better way to "view source" for a page. Inside the Elements panel, the page's DOM will be nicely formatted, easily showing you HTML elements, their ancestry and their descendants. Too often, pages you visit will have minified or simply ugly HTML which makes it hard to see how the page is structured. The Elements panel is your solution for viewing the real underlying structure of the page.

Elements 面板有时是一个更好的方式来页面“查看源代码”。在Elements 面板，页面的DOM会很好的格式化，更容易的显示你的HTML元素，他们的祖先和后代。更经常的，你访问的页面太小或太简单丑陋了，使得很难看清页面的结构。Elements 面板是你看清页面真正底层结构的办法。

Follow the steps below to explore the Elements panel:

跟随以下步骤来探索Elements 面板

• Open the Google Closure Hovercard demo page.

打开 Google Closure Hovercard demo page

• Open the Developer Tools window as described in the How to Access the Developer Tools section.

像在 How to Access the Developer Tools 这节描述的那样，打开开发者工具窗口

• If it is not already selected, select Elements.

假如它没有选中，选择Elements

 

• This shows the page's HTML elements in the main pane, and styles, metrics, properties, and event listeners in the right-hand sidebar. If Developer Tools opened via the Inspect Element action, it is automatically drilled down to and highlighted the element under mouse. This is very useful when you are curious which HTML generated a particular page element.

这在主窗格里显示了页面的HTML元素，在右边栏显示了样式、度量、属性和事件监听窗格。假如开发者工具通过查看元素操作打开的，它会自动深入并且高亮鼠标下的元素。当你对什么HTML生成了这个页面元素好奇时非常有用。

DOM Elements Tree

Elements tree, including its inline scripts and styles are syntax highlighted. For example, select the <script> tag. You should see something like the following:

元素树，包括它的内部脚本和样式被高亮显示。例如，选择<script>标签，你会看见如下界面

 

Select the <p> element in the main window, you should see something like this:

在主窗口选择<p>标签，你会看见如下界面

This lets you add, edit, or delete attributes for the selected DOM element - the <p> element currently has no attributes. Typing or pasting in attributes on the highlighted lines adds them to the DOM element. Deleting text deletes the attribute.

这让你增加，编辑或者删除选择的DOM元素的属性。当前的 <p> 元素没有属性。在高亮的行输入或者粘贴属性到这个DOM元素。删除文本删除属性。

• You can edit node attributes in the main pane via double clicking them or pressing Enter key while on an element. Tab will iterate over the editable attributes.

你能在主窗格通过在一个节点上，双击或者按Enter键编辑节点属性。Tab键会遍历可编辑的属性。

• You can delete selected nodes using Del key.

你能用Del键删除选择的节点。

• You can drag-and-drop an element to change its position within its parent, or even move the element to a different parent.

你能拖放一个元素来改变它的位置。

 

Back to top

CSS Styles

The cascading nature of CSS makes the Styles browser in the Elements tab very useful. Sometimes, styles collapse onto themselves and unintended visuals appear. Knowing which styling rule the browser is applying to the element helps you debug such an issue.

CSS级联的性质使得在Elements标签页里浏览样式非常有用。有时，样式collapse它们自身并无意识的可视化显示。知道浏览器对元素用的那个样式规则，有助你调试问题。

Click the magnifying glass icon to turn on inspect mode. Return to the Google Closure Hovercard page and click the top-left card, Tom Smith. Because you are in inspect mode, this highlights the corresponding node in the Elements panel and displays its associated styles, then turns off inspect mode.

单击放大镜图标，打开查看模式。返回Google Closure Hovercard页面并且单击左上的卡片，Tom Smith。因为你在查看模式，它在Elements面板高亮了元素的相应节点，并且显示了它相关的模式，然后关闭查看模式。

 

You'll see that we're able to tell all the style attributes that are being applied. For example, the padding comes directly from the <span> element's class == anchor attribute. The font is first defined for body, but then overriden by the .anchor. There is also the font property specified that is not recognized by the rendering engine. Properties like this are marked with the triangle warning sign to the left.

你会看到我们能辨别所有的正在被用到的样式属性。例如，padding直接来自于<span> 元素的anchor类属性。字体最先定义给body，但是被anchor覆盖了。也有font属性细节没有被渲染引擎识别人。这样的属性用惊叹号在其左边标识。

While it's great to see the individual styles and where they come from, it's also very useful to see the final set of styles after it is computed and applied to the element. You can see the final product by selecting the Computed Style section and explore styles as rendering engine perceives them.

能很高兴的看到独立的样式和它们从那里来。这对看到被计算和应用到元素的最终的样式非常有用。你能通过选择Computed Style节看到浏览渲染引擎理解的最终的样式。

Now, hover over the .anchor editable style rule in the sidebar to see checkboxes that let you disable individual properties. You should see something like this:

现在，鼠标划过侧边栏的.anchor可编辑样式，会看到复选框。让你禁用某个属性。你能看见像这样的一些事

You can disable a property by de-selecting it.

你能通过取消选择禁用属性。

 

Click an editable (non-grayed-out) style property name or value to edit them. For example, double-click the margin: 20px property. You should see something like this:

单击可编辑样式属性的名称或值，编辑它们。例如双击margin: 20px属性，你能看到如图示：

Autocompletion suggestions will appear while editing property names and values. To add a new style property, click anywhere in the editable style declaration whitespace. The new property will be added immediately after the clicked style declaration. If you edit a style property value with a number, you can use the Up or Down keys to change the number. Holding the Alt/Option key steps by 0.1, holding the Shift key steps by 10. You can add more properties via double-clicking white area to the left / bottom of existing entries or via pasting multiple properties separated with semicolon. You can start editing of style rule selectors by clicking them. You can also add new style rules using the Gear Menu, located to the right of the Styles section bar.

在编辑属性名称和值时，会显示自动完成建议。点击可编辑样式声明空白的任意位置，能够增加新的样式值。点击样式声明后，新属性会立即加上。如果你编辑一个样式属性值是数字，你能用Up或Down键改变数字。按住Alt/Option键，每次变动0.1，按住Shift键，每次变动10。你能通过 双击 左边或底部白色区域或者通过粘贴用分号分隔的多行属性，增加更多属性。你能通过点击样式规则选择器编辑。你也能用 位于样式section bar的Gear 菜单增加新样式。 

You can add a new style selector using the  button found in the Styles section bar. In order to emulate an element's pseudostate (:active, :hover, :focus, :visited), use the  in the Styles pane header. In will bring up a small pane where you can select which pseudostates of the selected element should be activated.

你能在Styles区找到按纽增加新的样式选择器。为了模仿元素的伪状态，可用样式窗格头部。会出来了一个小的面板，你能选择那个选择器的伪状态可以被激活。

Back to top

Box Model

盒模型

Open the Metrics pane in the right-hand side-bar, then double-click one of the metrics values.

在右边侧边栏，打开度量窗格，然后双击一个度量值。

This lets you edit any of the absolute, relative, or fixed CSS box model metrics.

这让你编辑任何absolute, relative, or fixed CSS盒模型度量值。

 

Properties

属性值

Select the Properties pane in the right-hand sidebar, then expand Element.

在右边侧边栏选择属性窗格，然后展开Element。

From here you can edit the element's DOM properties. Deleting all the text deletes the property, if allowed.

从这里，你能编辑DOM属性的元素。如果允许，删除所有文本删除属性。

 

DOM Breakpoints

You can add breakpoints that fire on DOM modifications related to a certain element. Bring up a context menu on the #profileCard element and select the events you want to break on: subtree modifications, attributes modifications, and the node removal. Let's select "Attributes Modification" for now. Mover your mouse over any gray rectangle with a name. Your JavaScript code will break inside tooltip.js which tries to modify the "className" attribute of the #profileCard element. Press F8 to continue the JavaScript execution. The code immediately breaks on an attribute modification once again. Now select DOM Breakpoints in the right-hand sidebar.

你能增加断点，它在关联的某一元素DOM变化时触发。在 #profileCard元素上出现上下文菜单，选择你想要中止的事件，subtree 修改，attributes 修改且node 移走。现在让我们选择属性修改。在任务灰框的名称上移动你的鼠标。你的javascript代码会中断在tooltip.js，它试图修改#profileCard的类名。按F8，继续执行JavaScript。代码再次立刻中断在属性修改处。现在在右侧边栏选择DOM断点。

You will see a list of your DOM breakpoints (contains a single breakpoint you just added.) You can toggle the breakpoint using a nearby checkbox to de-activate (and re-activate) it, or you can remove it altogether using its context menu's "Remove Breakpoint" item.

你会看见一系统DOM断点（包括你刚加的一个断点。）你能通过标记断点旁紧靠的复选框取消激活或再次激活断点，或者你能用右键菜单的“移走断点”来移走它。

 

Event Listeners

事件监听

Select Event Listeners in the right-hand sidebar.

在右侧边栏选择 Event Listeners 

The event listeners shown for the selected node are in the order in which they are fired through the capturing and bubbling phases. This provides the most accurate and useful information possible. Event listeners are separated by type. If a node has both onclick and onmouseover listeners they appear in different sections. You can also set your filter preference using the Gear Menu. You can choose to see only the listeners registered on the selected node, or the entire event flow.

事件监听器展示了选择的节点，它们在捕捉或冒泡阶段被触发。这提供尽可能最精确和有用的信息。事件监听器按类型分隔。如果一个节点有单击和鼠标划过监听器，他们会显示在不同的区。你能在齿轮菜单设置你的过滤器偏好。你能选择只看注册到选择节点上的监听器还是整个事件流程。

 

Search

Type document.write in the search box. You should see incremental search running:

在搜索框输入document.write，你能看到增量搜索运行：

补充，在搜索框按回车，可到下一个搜索到的项

The Elements panel supports XPath and CSS selectors as queries, in addition to plain text. All search results are highlighted in the DOM tree, the first match is revealed and selected.

Elements面板除普通文本外，还支持XPath和CSS选择器做为搜索请求。所有的搜索结构都在DOM树上高亮显示，第一个匹配的反色选择。