接着上篇Chrome审查元素概述继续写，这篇文章主要写写Chrome浏览器Developer Tools 的 Elements 功能模块。Developer Tools的主要功能也是Elements功能。Elements面板分为四部分，如下图所示(请放大图片查看)：
绿色框区域为网页源码区域，代码层次分明清晰。
箭头向左的标签都是包含内部标签的，点击箭头可以展开标签，只要文档结构良好，这里德层次结构也将是完美的，就像Altova XMLSpy能把XML完美的格式化一样，比IE的源码清楚多了。
值得注意的是，这个源码区域和网页是有联系的，当你鼠标放在源码的某一行上，则原网页就会高亮那一行标签所对应的网页内容，这样以后想找网页的某个区域对应的元素标签就易如反掌了，具体的看下面几个图，你就一目了然了：
好软件，一般是第一次使用就会喜欢上，我是第一次使用Chrome后就立刻抛弃了Firefox浏览器，因为无论是程序大小，还是浏览器启动速度，还是浏览器加载网页的速度，我觉得Chrome都远远优于Firefox，所以我义无反顾地停用了Firefox。不过Chrome浏览器的优点不止上面提到的一点，今天发现他的审查元素功能做的太好了，下面主要说说Chrome的审查元素功能。
将鼠标移动到网页上的任何一个位置，右键菜单里都有“审查元素”入口，鼠标在链接上审查的就是这个超链接标签；鼠标在图像上审查的就是图片标签；鼠标在文字上，那么审查的就是包含这些文字的网页标签，比如P、h3等等。仔细研究一个审查元素功能便会发现，它确实很强大。
审查元素功能窗口(Developer Tools)里又分为六个子功能，分别为Elements、Resources、Scripts、TimeLine、Profiles、Storage，整体界面如下图所示：