本文章，基于mac，快捷键跟window有点区别
作为前端开发者都知道，快捷键 option＋command+I 可以打开chrome调试工具，这里就大概介绍下chrome调试工具的常用方法，对调试工具的掌握，能大大提高我们调试代码的效率。每个面板都有详细的顺序标记和解释，一定要仔细阅读和练习。
调试中常用快捷键
- command+o 在Sources面板中打开一个文件(JS,CSS)
- command+f 查找当前文件中的关键字
- command+shift+f 全局查找关键字
- control+shift+e 在控制台运行当前选中的代码片段，这个方法可以用来在控制台中打印出变量或方法的返回值。
- command+d 将当前网页加入书签
- command+Y 查看”历史记录”页
接下来我们对chrome中各个面板做一个简单的介绍
Elements面板
此面板是控制面板是控制DOM结构和CSS样式的。
下图共标记了6处，我们分别解释一下
位置1：点击后选择页面中的任何元素，就会选中相应的DOM节点
位置2：Toggle Device Mode切换设备模式，可以模拟该页面在各种移动端设备的显示情况。
位置3：Edit as HTML,选中某段html代码后可以直接编辑这段html代码。可以直接拖放节点，
(右击查看元素跳出此面板)
(右击查看元素跳出此面板)
位置5：Event Listeners可以查看该元素所绑定的事件。
位置6："Computed"面板里，点击样式前面的放大镜图标，就可以直接定位到具体的样式。当样式层级较深，继承较多时，对调试页面的样式很有帮助。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Network面板
此面板是查看网络请求信息的。
下图共标记了6处，我们分别解释一下
位置1：filter过滤器，可在输入框中输入关键字搜索对应请求的文件。
位置2：请求文件的列表里进行了分类，个人常用的是查看XHR的分类，查看Ajax请求。
位置3：设置网络的通信方式。默认"No thirotting"不节流。这里可以设置断网模式，或者模拟3G，4G网络等情况下页面加载的速度。
网速可以在"settings"里面设置。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Sources面板
此面板是调试中最常用的地方。
下图共标记了8处，我们分别解释一下
位置1：查看页面中加载的资源文件
位置2：如果浏览器装了插件，插件所需要的JS文件会在这里显示
位置3：使用ctrl+p/ctrl+o 打开某个文件
位置4：断点的操作
位置5：查看异步请求时所设置的定时器
位置6：点击右边的加号，可以增加监听的变量。不过鼠标放到JS文件中的变量时也会显示对应的值。
位置7：设置各种不同的断点。
当勾选XHR Breakpoints里的any XHR时，页面中触发Ajax请求时都会中断。
当勾选"Event listener breakpoint" 下的 Mouse（鼠标）下的 Click （单击）事件时，触发某个按钮的点击事件就会中断。
位置8：一般线上的代码都是打包后的代码，不利于调试。点击{}后格式化该文件。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Profiles面板
此面板主要是做深度性能优化
不同版本的Chrome DevTools差别很大，这里我们基于最新版的Mac Chrome完成，
主要介绍Network/Timeline/Profiles三个方面的内容。
Profiles用来更深入的分析性能问题、内存问题。要深入分析，定位问题原因，还得靠Profiles。
如截图所示，Profiles提供了三个主要功能：Collect Javascript CPU Profile：用于找出耗时较长的JS函数。Take Heap Snapshot：用于分析JS对象及其关联的DOM节点的内存分布。Record Heap Allocations：记录内存分配信息，用于分析内存泄露的情况。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Timeline面板
Timeline面板是查看动态流的。在这里可以测试页面的性能问题。比如页面的渲染速度，动画的流畅度等。
下图共标记了5处，我们分别解释一下
位置1：点击这个按钮开始Record，按钮变成红色，再次点击停止记录。
位置2：选择记录生成的图表模式
位置3：需要记录的类型
位置4：fps指每秒的帧数，这个可以衡量页面的渲染速度。如果低于60fps，则页面可能需要优化下了。如果低于30fps，则页面的卡顿现象会比较严重。
位置5：记录期间页面加载的比重。看哪个范围的值特别大，占用时间最长，然后有针对性的优化。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Resources面板
resources面板展示各种资源文件，包括本地存储，session,cookies,cache等信息
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Console面板
console控制台输出信息，console的方法有很多种，包括console.log(),console.info(),console.error(),console.table()等。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Settings 选项（这是一个插件）
勾选下面这个选项后就会在控制台中打印出所有的Ajax请求地址。
