chrome浏览器[Chrome开发者工具]使用教程之Elements(元素面板)

chrome开发者工具可以通过Elements元素面板自由操纵DOM和CSS来重演您网站的布局和设计。通过工具检查和调整你的页面，编辑样式，编辑DOM。可以实时编辑一个DOM节点要实时编辑DOM节点，只需双击选中元素并进行更改：

检查和调整你的页面

可以实时编辑样式属性名称和值。所有样式都是可编辑的，除了那些灰色的（如user agent stylesheet中的样式，html中文网注：即我们通常说的浏览器的默认样式表）。

要编辑名称或值，只要单击它就可以了，然后进行修改，然后按Tab或Enter键保存修改。

默认情况下，您的CSS修改不是永久的，当您重新加载页面时，修改的内容就会丢失。如果您想要在页面重新加载时保留您的修改，请工作区设置持久化。如果您尚未设置持续创作，你只要重新加载页面，所有实时编辑内容都会丢失。想实现这个持久化，以将这些更改保存到磁盘中，可以将本地源文件添加到工作区。

可以在 Sources 面板中修改，请执行以下操作：

1. 右键点击左侧面板。

2. 选择 Add Folder to Workspace。

3. 选择您想要映射的本地文件夹的位置。

4. 点击 Allow，授予 Chrome 访问该文件夹的权限。

编辑样式：

user agent stylesheet  html中文网注：即我们通常说的浏览器的默认样式表

检查应用到元素的样式

选择一个元素[Select an element] 来检查它的样式。Styles(样式)窗格将显示所有应用于所选元素的CSS规则，优先级从高到低展示：

• 在顶部是element.style。这些是使用style属性直接应用于元素的样式（例如，<p style="color:green">）(注：内联样式)，或是你在DevTools该区域编辑应用的。

• 下面是与元素匹配的所有CSS规则。例如，在下面的屏幕截图中，所选元素接收line-height:24px 的规则，定义在tools.css中。

• 下面是继承的样式，包括匹配所选元素的祖先元素所有可继承的样式规则。 例如，在下面的屏幕截图中，所选元素继承了来自user agent stylesheet中的display:list-item 规则。

  
  

编辑DOM。

Chrome DevTools Elements(元素)面板中的DOM树视图显示当前网页的DOM结构。DOM定义了页面的结构。每个DOM节点都是页面元素，例如，头部(header)节点，段落(paragraph)节点。通过DOM更新来实时编辑您的网页的内容和结构。

1. 浏览DOM

2. 
   

3. 使用你的鼠标：

4. 单击一次来突出显示一个节点。

5. 要展开节点，请双击该节点上的任意位置或单击旁边的箭头。

6. 要折叠节点，请单击节点旁边的箭头。

7. 使用你的键盘：

8. 按Up Arrow(向上箭头)键选择当前节点上方的节点。

9. 按Down Arrow(向下箭头)键选择当前节点下方的节点。

10. 按Right Arrow(向右箭头)键展开折叠的节点。再次按下可移动到（现在展开的）节点的第一个子节点。您可以使用这个技巧快速浏览深层嵌套的节点。

编辑DOM节点和属性

要编辑DOM节点名称或属性：

直接双击节点名称或属性。

在高亮显示节点上，按Enter键，然后按Tab键直到选中名称或属性。

打开更多操作菜单，然后选择Add Attribute(添加属性)或Edit Attribute(编辑属性)。Edit Attribute(编辑属性)是上下文相关的;你点击的部分决定了哪些内容将被编辑。

结束编辑会在完成后自动更新。

设置DOM断点

设置DOM断点可以用来调试复杂的JavaScript应用程序。例如，如果你的JavaScript改变了DOM元素的样式，设置一个DOM断点当元素的属性被修改时触发。在以下DOM更改都会触发断点：子树的变化，属性改变，节点删除。