3.2　Elements标签

在Elements标签中允许从浏览器的角度看页面，也就是说可以看到Chrome渲染页面所需要的HTML、CSS和DOM（Document Object Model）对象。此外，还可以编辑内容更改页面显示效果，如图3-3所示。

图3-3　Elements标签

图3-3中，Elements标签最左边的按钮用于快速查找网页元素，单击该按钮后，在网页上某一处单击，就会自动显示并选中该元素在HTML里的位置。

Elements标签分成两部分，分别在图3-3中标为区域1和区域2，两个区域相辅相成。区域1显示整个网页的HTML信息，单击选中某一行内容的时候，区域2的Styles标签会显示当前单击选中内容的CSS样式，并可对元素的CSS进行查看与编辑修改。Computed显示当前选中的边距属性、边框属性，用图像显示一个整体效果。Event Listeners是整个网页事件触发的JavaScript，如图3-4所示。

图3-4　Event Listeners

通过单击Event Listeners下的某个JavaScript会自动跳转到Sources标签，显示当前JavaScript的源码，这个功能可快速找到JavaScript代码所在的位置，对分析JavaScript起到快速定位作用。