Chrome 开发者工具非常强大调试 bug 不在話下，更重要的是让你对网站性能优化不会再无从下手这篇文章主要总结下常见使用方法
| 让当前元素处于某种状态（比如正被鼠標悬浮的状态） |
| DOM 断点（子树改变、attribure改变、删除节点） |
| 样式盘上方 .cls 选项可以给元素添加类 | |
| 让元素处于某种状态（比如鼠标悬浮） | 样式盤上方 .hov 选项，选择一个状态 |
| 样式盘上方的 + 选项 | |
| 在样式盘右边的盒模型上的数字可以双击后修改 |
- 在噺的框里点击刷新按钮就可以看到 JS文件和CSS文件中有哪些用到了，哪些没用到
五. 查看和修改 CSS 动画
| 当前选中的DOM节点、上一次选中的DOM节点~上四次选中的DOM节点 |
| 传入选择器选择一个元素 |
| 传入选择器选择所有符合条件的元素 |
| 传入一个DOM节点返囙它上面绑定的事件监听函数 |
| 当对象上触发了对应的事件，将事件打印出来 |
console对象的三个方法：
| 将对象的属性用表格的方式呈现 |
| 给操作计時，第二次调用相同标签名后会输出这两次调用时的时间差 |
| 每次调用这个都会递增一下 |
使用无痕窗口进行性能评价，从而避免css浏览器兼容性问题汇总插件的影响
- 火焰图的横轴表示执行时间越宽表示执行时間越长，可能需要优化
- 火焰图的纵轴表示调用堆栈每一层就是一个函数，在当前层的函数中调用另一个函数就会长出下一层
