Element 译为“元素”，Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表，并且立即生效，避免了频繁切换浏览器和编辑器的麻烦。
我们可以使用Element面板来查看源代码，它不但可以很好的格式化DOM节点，清晰的展现HTML文档，还可以查看JavaScript创建的DOM节点和iframe中的DOM节点，比在当前网页中右击鼠标选择“查看网页源代码”强大很多。
总之，Element面板可以让我们很透彻的了解DOM和CSS的底层结构。
我们将以下面的HTML代码为例来详细了解Element面板：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
- <style type="text/css">
- h1{
- color: blue;
- }
- p{
- padding: 10px;
- border: 1px solid #ccc;
- }
- </style>
- <title>Chrome开发者工具演示</title>
- </head>
- <body>
- <div>
- <h1>JavaScript中文网</h1>
- <p>http://www.itxueyuan.org/javascript/</p>
- </div>
- </body>
- </html>
复制该代码，保存为demo.html并在Chrome浏览器中打开，按 Ctrl+Shift+C（Mac系统为Cmd+Shift+C）打开开发者工具并进入元素审查模式。
查看DOM树
打开Element面板，可以查看所有DOM节点，包括CSS和JavaScript，如下图所示，左侧为DOM树，右侧为CSS样式。
图 2.1 Element面板示例
图标说明：
- 点击“图标1”，可以在新窗口中打开开发者工具，再次点击回到当前网页；
- 点击“图标2”，可以调出控制台，可以在控制台里输入并执行JavaScript代码，查看当前网页的错误和日志等；
- 点击“图标3”，可以选取当前页面的HTML元素。
选取DOM节点
点击“图标3”（由黑色变为蓝色），将鼠标移到网页中的某元素上面，该元素会发生变化如下图所示：
图 2.2 鼠标移动到网页中的元素
点击该元素，即可选中。这时，会发现Element面板中的DOM树发生了变化，如下图所示：
图 2.3 DOM树发生变化
选中的<p>节点在DOM树中被精确定位（蓝色背景），可以看到<p>节点的DOM层次（红色方框），在面板右侧，是<p>节点的CSS样式。
当然，也可以在Element面板的DOM树中选取DOM节点。将鼠标放到相应的DOM节点上，会发现网页中相应的节点也发生了变化（同图2.2），点击该节点，即可选中。
增加、删除和修改DOM节点
在Element面板中，选择DOM节点，在文本处右击鼠标，会弹出一个菜单，如下图所示：
图 2.4 DOM编辑菜单
菜单说明：
- Edit text（编辑文本）：编辑该节点中的文本。也可以在文本处双击进行编辑。
- Edit as HTML（编辑HTML）：编辑该节点及其子节点的所有HTML元素（包括节点中的文本）。
- Copy as HTML（复制HTML）：复制该节点及其子节点的所有HTML元素（HTML文档）。
- Copy XPath（复制XPath路径）：复制该节点的XPath路径，即DOM层次路径。例如，<p>节点的XPath路径为 /html/body/div/p 。
- Delete node（删除节点）：删除该节点及其子节点的所有HTML元素。也可以使用 Backspace 和 Delete 键删除。
- Inspect DOM properties（审查DOM属性）：在控制台中显示该节点的所有标准属性（如果有的话）。
- Word wrap（自动换行）：HTML代码是否自动换行。
对 Inspect DOM properties（审查DOM属性）的说明：
为<p>节点添加id属性，如下：
- <p id="demo">http://www.itxueyuan.org/javascript/</p>
会在控制台输出p#demo；再向<p>节点添加class属性和name属性，如下：
- <p id="demo" class="demo" data="demo">http://www.itxueyuan.org/javascript/</p>
会在控制台输出p#demo.demo。
可见，控制台只会输出符合W3C标准的属性，不支持自定义属性。不过，实际开发中很少用到该功能。
另外，我们也可以通过拖动节点来改变节点的顺序，双击属性节点来改变它的值。
查看CSS样式
CSS样式审查面板是一个非常有用的面板，实际开发中，有时候CSS样式表会非常复杂，甚至连我们自己都不知道当前节点应用了哪些样式。使用CSS样式审查面板，可以让我们清楚地知道当前节点使用了哪些样式，分别来自哪些文件，哪些样式是被覆盖的，哪些样式是最终样式，哪些样式是无效的，等等。
如图2.3所示，选中节点，Element面板右侧的CSS样式审查面板会展示出该节点的CSS样式。
在CSS样式审查面板中，我们可以添加、删除和修改CSS样式。
另外，CSS审查面板中有几个子面板，如下图所示：
图 2.5 CSS样式审查面板的子面板
子面板说明：
- Style（样式）：当前节点的样式；
- Computed（计算）：查看当前节点经过计算后的样式以及盒模型数据；
- Event Listeners（事件监听）：查看为当前节点绑定的事件和事件监听函数；
- DOM Breakpoints（DOM断点）：查看为当前节点设置的DOM断点；
- Properties（属性）：当前节点（对象）的所有属性。
【小技巧】使用键盘方向键改变数值
查看<p>节点的样式，如【图2.3】所示，选中 padding 的值，按下键盘方向键（<- 和 ->）数值会跟着改变，页面上<p>节点的样式也立刻改变。实际开发中，会经常使用该方法来微调元素的外边距、内补白和大小等，非常方便。
【小技巧】颜色拾取器
查看<p>节点的样式，如【图2.3】所示，选中 background-color 后边的小图标
，会弹出颜色拾取器，能够很方便的改变背景颜色，如下图所示：
图 2.6 颜色拾取器
实际开发中，会经常使用该方法来微调节点的颜色。
REFERENCE FROM : http://www.itxueyuan.org/view/6708.html