孔子约：工欲善其事，必先利其器。老子也约过：孔子说得对！
所以对前端er来说，熟练掌握浏览器调试工具是性能优化的必备条件。
首先我们得知道如何打开chrome调试工具。
你可以鼠标右键，选择审查元素（inspect element）或者使用快捷键（⌥⌘i）。
element
接下来我们先简要介绍一下chrome调试工具各个工具的作用。
element elements板块你可以看到整个页面的dom结构。你可以在这里编辑html,查看元素css,查找元素等等。
network 这个板块，你可以查看页面所加载的所有资源响应情况，响应时间，浏览器等待时间，状态码，mine type,资源大小等。
sources sources就是所有资源了，你可以看到页面加载的资源，图片，css,js等，它们会按照资源的来源分类。
timeline 跟前面的工具相比，timeline就高级很多了。它可以让你查看浏览器的渲染流程。解析代码,布局，绘制，合并渲染层。了解更多，查看之前的文章 浏览器渲染流程
profiles profiles工具主要是用来检测cpu占用程度，堆栈申请的内存。
resources resources工具显示资源的，跟sources不同的是，它会对文档类型分类。并且它可以查看，增加，删除，修改页面localstorage，sessionstorage,cookies等等。
audits audits工具非常智能，它会告诉你如何优化页面，告诉你应该合并css,js，应该明确图片的大小，以及某个css文件中unused css的百分比等。
console console应该都很熟悉了吧？经常会以为少写了’}’而报语法错误。当然它的功能远不止这些。 点击这里 查看更多
奇淫技
隐藏的刷新按钮，在开发者工具打开的情况下，长按左上角的刷新按钮，会出现多种加载选项。
刷新按钮
可以保存修改，source面板下的文件是可以修改并且支持版本回退的。打开一个文件，进行编辑，保存。右键打开local modifications,你可以看到保存记录，你可以选择回退，到某个时间点。你也可以另存为~
保存，回退
css选择器，elements工具中的选择器，支持css选择器
支持css选择器
jquery语法，console工具 支持 jquery语法，选中后，你还可以右键选择reveal in elements panel,跳回element工具。
`支持`jquery语法
查看使用字体，elements工具右侧css模块，最底部可以看到某个元素最终具体使用的字体。
某个元素最终具体使用的字体
setting，devtools中的setting，支持在devtools打开时强制清除缓存，记录ajax,打开source map,增删改模拟器等等。
devtools中的setting
add folder to workspace，在source面板下，右键选择add folder to workspace，之后就可以直接编辑该目录下的任何文件。
add folder to workspace
source下的snippets，可以让你想保存小段的脚本、书签或是你在浏览器中调试时经常用到的代码，都可以使用snippets，你可以在source面板里创建、存储和运行这些snippets。
snippets
12月15更新
scroll into view，滚动浏览器到元素所处位置
scroll into view
snippets， 这里 有很多实用的snippets，比如运行allcolors.js，你可以列出当前页面所有颜色值。
snippets
调试sass，通过工具生成sourcemap以及chrome的一点设置，你可以调试sass,coffeescript,并且实时保存。 相关文章： working with css preprocessors , developing with sass and chrome devtools
调试sass
$0,$_ 打印，element面板选中标签
$0,$_ 打印
在console面板，可以使用 $0 或者 $_ 快速将它打印出来
快速将它打印出来
console更多功能,console面板还有很多功能，比如 console.error , console.group , console.time 。 自行查阅api
console.group合并输出
添加样式
chrome dev开发者选项,浏览器进入 chrome://flags ，你会看到很多浏览器很多隐藏功能，启用开发者工具实验。
chrome://flags
然后再进入设置，你会看到新增加了很多开发者选项。
开发者选项
打开layer面板，可以让你看到页面中的复合层。（查找页面原因的时候非常有用）
打开layer面板
查看页面响应式断点,打开模拟器，在左上角有个按钮，单击它，你能看到页面中的响应式断点。
查看页面响应式断点
总结 这篇文章的内容到此为止算是完结了，总结的过程也重新复习了一遍操作。虽然这些技能可能都算不上什么特殊技巧，掌握它们，也不会让你瞬间变得有多强大。但是熟悉它们，善用它们，可能会让你在某些场合，省下大量时间去喝杯咖啡。
稿源： w3ctrain