凌晨四点的蓝

Chrome审查元素概述

好软件，一般是第一次使用就会喜欢上，我是第一次使用Chrome后就立刻抛弃了Firefox浏览器，因为无论是程序大小，还是浏览器启动速度，还是浏览器加载网页的速度，我觉得Chrome都远远优于Firefox，所以我义无反顾地停用了Firefox。不过Chrome浏览器的优点不止上面提到的一点，今天发现他的审查元素功能做的太好了，下面主要说说Chrome的审查元素功能。

将鼠标移动到网页上的任何一个位置，右键菜单里都有“审查元素”入口，鼠标在链接上审查的就是这个超链接标签；鼠标在图像上审查的就是图片标签；鼠标在文字上，那么审查的就是包含这些文字的网页标签，比如P、h3等等。仔细研究一个审查元素功能便会发现，它确实很强大。

审查元素功能窗口(Developer Tools)里又分为六个子功能，分别为Elements、Resources、Scripts、TimeLine、Profiles、Storage，整体界面如下图所示：

Elements面板里包含最基本的功能，也是最实用的功能。

Elements面板的左侧是网页整体的层次图，只要你的网页具有良好的机构，从这个层次里便可对网页全局把握。相反，如果得网页结构不好，也可以从这里看出。被选中的部分是你调用审查功能时，鼠标停靠处的网页元素，也就是你要审查的元；Elements面板的右侧是元素的几个基本属性面板，包括元素的Styles、Metrics、Properties、Event Listeners。

就是这个简单的面板，能让你做一些意想不到的事情。你可以选择某些元素，然后在网页里便会加深显示你所选择的元素块；你可以查看元素的Metrics结构图；你可以更改一些元素的属性，然后你的更改会立刻在网页上起效，以便你预览；你甚至可以键入一些命令去获取你想要知道的信息。碍于篇幅，这部分在以后的文章中继续介绍。

Recources面板里包含的是网页的所有文件，包括Document、CSS、脚本、图片等等。你可以在这个面板里查看，各个文件的加载时间，以及他们的大小等等，功能不算很多，但是统计做的不错，给人很直观的感觉。详细使用到以后的文件里再做介绍。

Scripts面板是脚本调试的面板，首先它包含网页所以的脚本，其次是它可以在这个面板里调试脚本，调试器具备基本功能，设置断点，调用堆栈，变量监控等功能，详细的使用，我自己也还在摸索之中，等研究透了，再与大家分享。

TimeLine时间表面板，其实也是个监控面板，监控页面各个文件的载入以及各个事件的响应时间，这个功能个人觉得实用性不是很强，等以后发现它的价值的时候，再做研究。

Profiles面板是监控或者说是统计网页占用的内存以及CPU的情况，这个面板的实用性也不是很强，不过可以在网页占用资源很大的时候分析一下到底是什么元素占用太多的资源。

Storage面板统计的是网页在本地存储的一些cookies等，人性化的设计，让它可以在这里删除这些cookies，要是不能删除的话，我想这个面板也确实没什么用处了。

本篇博文只是对Chrome的Developer Tools工具做大概的介绍，对于里面的各个功能的使用，要分到以后的博文中了，否则篇幅太大，难以一鼓作气写完，同时也有不少功能自己还在摸索中，估计谷歌的开发人员也在紧张地完善当中。