名字起得有点奇怪，但是没关系。我只是随便起的。
孔子约：工欲善其事，必先利其器。老子也约过：孔子说得对！
所以对前端r来说，熟练掌握浏览器调试工具是性能优化的必备条件。
如何打开Chrom调试工具
首先我们得知道如何打开Chrom调试工具。
你可以鼠标右键，选择审查元素（InspctElmnt）或者使用快捷键（??I）。
Chrom调试工具的作用
接下来我们先简要介绍一下Chrom调试工具各个工具的作用。
Elmnt
Elmnts板块你可以看到整个页面的Dom结构。你可以在这里编辑HTML,查看元素CSS,查找元素等等。
Ntwork
这个板块，你可以查看页面所加载的所有资源响应情况，响应时间，浏览器等待时间，状态码，MINETyp,资源大小等。
Sourcs
Sourcs就是所有资源了，你可以看到页面加载的资源，图片，css,js等，它们会按照资源的来源分类。
Timlin
跟前面的工具相比，Timlin就高级很多了。它可以让你查看浏览器的渲染流程。解析代码,布局，绘制，合并渲染层。
Profils
Profils工具主要是用来检测CPU占用程度，堆栈申请的内存。
Rsourcs
Rsourcs工具显示资源的，跟Sourcs不同的是，它会对文档类型分类。并且它可以查看，增加，删除，修改页面LocalStorag，SssionStorag,Cookis等等。
Audits
Audits工具非常智能，它会告诉你如何优化页面，告诉你应该合并CSS,JS，应该明确图片的大小，以及某个css文件中unusdCSS的百分比等。
Consol
Consol应该都很熟悉了吧？经常会以为少写了’}’而报语法错误。当然它的功能远不止这些。
奇淫技
在开发者工具打开的情况下，长按左上角的刷新按钮，会出现多种加载选项。
Sourc面板下的文件是可以修改并且支持版本回退的。打开一个文件，进行编辑，保存。右键打开LocalModifications,你可以看到保存记录，你可以选择回退，到某个时间点。你也可以另存为~
Elmnts工具中的选择器，支持css选择器
Consol工具’支持’jQury语法，选中后，你还可以右键选择RvalInElmntsPanl，跳回Elmnt工具。
Elmnts工具右侧css模块，最底部可以看到某个元素最终具体使用的字体。
dvtools中的stting，支持在DvTools打开时强制清除缓存，记录AJAX,打开sourcmap,增删改模拟器等等。
在Sourc面板下，右键选择AddFoldrtoWorkspac，之后就可以直接编辑该目录下的任何文件。
Sourc下的Snippts可以让你想保存小段的脚本、书签或是你在浏览器中调试时经常用到的代码，都可以使用Snippts，你可以在Sourc面板里创建、存储和运行这些Snippts。
待续。
总结
趁着有空看了TrHous的WbsitOptimization教程，总算是把Chrom调试工具的基本功能都摸清楚了。本文作为学习笔记。
文章源自：