> 然后选择“审核元素”那一项，即可启动 Chrome 的开发者利器，嘿嘿嘿。
> 先看下图中的界面，界面中条理清晰，很容易就可以理解网页的结构与代码形式。

1. 分析网页：

> 左侧可以很容易地理解网页的结构，而右边可以对元素进行具体的分析。
> 比如图中，左侧选择一个元素，而在右侧则清楚的表明其CSS属性来自何处。
> 这样如果想要修改一些CSS混杂的网页的话，完全不是问题了。

2. 分析元素范围：

> 同时它还提供了元素地范围标示图，如下图，当你鼠标指向利器中的某个元素时。
> 网页中相应的位置的元素就会被标示出来，同时如果你十分熟悉标示图的话。
> 一眼就能看出 Padding Margin Height 等等属性的范围与起到的作用。

3. 即时修改（亮点）：

> 然后，当我们把鼠标指向CSS分析框中时，就会出现如下图的一列复选框。
> 我们可以随时使用复选框取消某一属性的作用，即时进行调整。

> 仔细观察高亮的那一行代码，你会发现代码右边多出了点什么，那是我鼠标指上去的缘故。

> 然后双击它，这样就可以输入代码了喔，比如我们像下图一样输入 style="background:#fff;"。
> 然后猛击回车，代码的效果就会即时反应在网页上，嘎嘎，多么强大的利器哇！
> 当然咯，刷新一下效果就会还原为初始状态，这个时候根据你的修改再写入CSS文件就好咯。

> 而且还可以像下图一样去修改右侧的CSS呢，右侧修改的话是根据选择器生效的喔。

> 这里完全消灭了以前编辑CSS然后保存再刷新网页的这个辛苦的过程。
> 呵呵，当然你使用 Top Style 等等软件也行，不过这类软件一般只支持IE内核吧。

4. 素材罗列：

> 同时利器顶部有个叫 Resources 的选项，点进去就可以清晰地看到每个素材。
> 呵呵，如果你对某个网页怀有好奇心的话，不妨打开利器来看看，搜刮一番。
> 哇卡卡卡卡。然后左侧还有 Time 和 Size 的选项，可以分析元素载入耗时和素材大小。

5. Cookies 查看：

> 这里清楚地罗列了在此网站保存的 Cookies，可以随意分析喔。
> 嘎嘎，有一列是 Value，小邪就给藏起来了。

6. 代码错误提醒：

> 顶部的 Console 选项点进去就会出现一个列表。
> 里面显示的是浏览器解析时候遇到的问题和处理问题的建议。

7. 欢迎来 Follow 我的 Twitter @AngelSolo

> 嘿嘿嘿，让你的网站代码越来越完美吧，到时候牛X了一定要叫小邪去围观喔。
> 小邪最喜欢截图留念了，O(∩_∩)O 哇卡卡卡卡！（偶的笑声升级了）

> 可能有点复杂，╮(╯▽╰)╭ ，代码是一点一点精简的嘛，越长的代码越容易理解的说。
> 要是大家有兴趣，下次我就做一个便携包，全部使用相对路径，就OK了。

> P.s. 现在在杭州，没带自己的电脑，只好用老妈的小本本，小屏幕好痛苦。

讲解：

> 一般来说 WindowsXP下的Chrome的用户配置文件都在这里
> 用户文件夹\Local Settings\Application Data\Google\Chrome\User Data
> Chrome的安装路径都在这里，呵呵，看看桌面上快捷方式的属性就知道了
> 用户文件\Local Settings\Application Data\Google\Chrome\Application\chrome.exe

> 而在Windows7下Chrome的用户配置文件都在这里
> 用户文件夹\AppData\Local\Google\Chrome\User Data\

> 那么要做的准备就是 7z 与 Chrome 的整个Application文件夹
> 即在已安装 Chrome 的电脑上把 Application 复制到和批处理同一个目录里

ren "谷歌的用户目录\User Data" "User Data Bak"
md "谷歌的用户目录\User Data"
md "谷歌的用户目录\User Data\Default"

> 1. 首先为了防止把本电脑拥有者的用户配置文件覆盖掉，使用上边的代码把原先的文件目录修改个名称
> 2. 然后就可以创建 User Data 和 Default 两个存放配置文件的文件夹了，Seven用户请自行修改
> 3. 接着使用 7z 把我们自己的用户配置文件压缩包解压出来，话说 7z 只需要这么几个文件
> 4. 7z.exe 7z.dll.7z.sfx 几个文件即可，放在这个批处理的文件夹里面
> 5. 因为担心 7z 的命令行不支持长文件名或者带空格的文件名，所以这里要拐弯抹角一下
> 6. 首先解压到C盘下面一个叫 tempfiles 的文件夹中，然后再复制所有文件到配置文件夹
> 7. 最后删除 tempfiles 文件夹即可，呵呵，头痛了的举手 ^0^ ，陪我一起蛋疼吧
> 8. 解释下命令 move 是移动，rd 是删除文件夹， /s 表示包括子文件和子文件夹，/q 表示不询问用户

7z e t_chrome.zip -oc:\tempfiles
move "c:\tempfiles\*.*" "谷歌的用户目录\User Data\Default"
rd "c:\tempfiles" /q /s

> 9. 7z 的命令中，e 表示解压缩后面这个压缩包，-o 表示设置目标文件夹
> 10. 然后使用 Call 命令启动 Chrome，Call 命令的好处是 Chrome.exe 关闭之后才会继续执行下面的命令

call ".\Application\chrome.exe"

> 11. 下面的命令在 Chrome.exe 关闭之后才会继续执行
> 12. 那么现在需要把被浏览器使用过后的我们自己的文件保存起来放在U盘上
> 13. 首先删除原来的保存压缩包，建立 Chrome_data 目录
> 14. 复制收藏夹，Cookies，等一些自己所必须的小容量文件

del t_chrome.zip /q
md chrome_data
copy /y "谷歌的用户目录\User Data\Default\Arch*" Chrome_Data
copy /y "谷歌的用户目录\User Data\Default\bookmarks" Chrome_Data
copy /y "谷歌的用户目录\User Data\Default\cookies" Chrome_Data
copy /y "谷歌的用户目录\User Data\Default\current*" Chrome_Data
copy /y "谷歌的用户目录\User Data\Default\exten*" Chrome_Data
copy /y "谷歌的用户目录\User Data\Default\last*" Chrome_Data
copy /y "谷歌的用户目录\User Data\Default\pref*" Chrome_Data
copy /y "谷歌的用户目录\User Data\Default\visited*" Chrome_Data
copy /y "谷歌的用户目录\User Data\Default\web*" Chrome_Data
7z a t_chrome.zip Chrome_Data
rd chrome_data /q /s
rd "谷歌的用户目录\User Data" /q /s
ren "谷歌的用户目录\User Data Bak" "User Data"

> 15. 然后压缩成 t_chrome.zip 文件，删除 Chrome_data 文件夹及子文件
> 16. 清楚自己在此电脑上的痕迹，将电脑上原来的配置文件还原

> 完工鸟，嘎嘎 \(^o^)/ ，下面是完整的批处理内容

ren "谷歌的用户目录\User Data" "User Data Bak"
md "谷歌的用户目录\User Data"
md "谷歌的用户目录\User Data\Default"
7z e t_chrome.zip -oc:\tempfiles
move "c:\tempfiles\*.*" "谷歌的用户目录\User Data\Default"
rd "c:\tempfiles" /q /s
call ".\Application\chrome.exe"
del t_chrome.zip /q
md chrome_data
copy /y "谷歌的用户目录\User Data\Default\Arch*" Chrome_Data
copy /y "谷歌的用户目录\User Data\Default\bookmarks" Chrome_Data
copy /y "谷歌的用户目录\User Data\Default\cookies" Chrome_Data
copy /y "谷歌的用户目录\User Data\Default\current*" Chrome_Data
copy /y "谷歌的用户目录\User Data\Default\exten*" Chrome_Data
copy /y "谷歌的用户目录\User Data\Default\last*" Chrome_Data
copy /y "谷歌的用户目录\User Data\Default\pref*" Chrome_Data
copy /y "谷歌的用户目录\User Data\Default\visited*" Chrome_Data
copy /y "谷歌的用户目录\User Data\Default\web*" Chrome_Data
7z a t_chrome.zip Chrome_Data
del /q chrome_data\*.*
rd /q chrome_data
rd "谷歌的用户目录\User Data" /q /s
ren "谷歌的用户目录\User Data Bak" "User Data"

我们来图
图中第三列有空档 这里在读取Widget的数据 花费了0.6s左右
图中6.05s和7.70s之间有一个大的空当 这里在读取文章的数据 花费了1.5s多
在数据读取上花费的时间过多
所以SuperCache和WidgetCache是必备的

4条长的紫色条是表示在读取Flickr图片上花费的时间
这也是没办法的

前面长的橙色条是表示花费在jQuery库的读取时间
所以我改成了从Google提供的MinijQuery库读取

第四行的绿条是用Autoptimize优化之后的CSS 读取很快
这个插件我没有优化HTML和Javascript
因为优化HTML会造成我的Mail to Commenter插件无法使用
而优化Javascript会造成我的回复按键无法使用

剩下紫色小点是CSS模板元素的读取
这个不用管它
当然如果这里花费过多 请检查你的模板

原来我在最底下有一个4s的空档
居然是统计代码的问题
我干脆就不统计了

那么看我优化之后的图

图上的点呈一条竖直的直线
颜色分布很均匀
当然这张图来自于未包含Flickr图片的页面
所以都是小点

前面的空档是我换成OpenDNS的原因
域名解析服务器离我这里有点远哈

所以说Chrome的优化分析是非常有用的 节省了很多时间