devtools 是我们前端开发里面用的最多的工具，其实里面隐藏了很多好玩的功能，今天分享几个我觉得还不错比较有意思的功能！
命令（Command） 菜单
“命令”菜单是最最常用的，本文也会多次用到，所以这里先说一下打开方式,打开 devtool , Cmd + Shift + P
里面可以选择一些我们不常见的工具。
图层工具：
这块可以通过旋转看整个页面的层级渲染情况，chrome 的渲染路径是先绘制各种层级，然后最后整体提交，以前叫复合，我感觉复合更加形象一些，把多这个层最后汇合成图像！，怎么去创建单个层级我在这个地方不细讲，主要通过定位或者加一些 css 属性，比如will-change 这种方法去告诉浏览器我要这块内容单传创建一个层级渲染，这样的好处就是减少页面的布局和重绘，只对部分模块进行绘制！这块比较适用于在页面中经常动的地方！
动画工具
他可以把页面中所有动画进行回放和调试，并且进行慢放动作，在做一些动画调试的时候比较有用
CSS/JS 覆盖率
此处可以覆盖率来看看代码的利用率，但是我感觉用处一般，京东很多业务场景太多判断导致覆盖率很难上来！
图片复制成 base64
把png 图片可以直接复制成 base64 格式的，少一些转换操作
绘制工具
这块因该是前端应该重点关注的，看看页面在渲染过程中有哪些问题，比如抖动，cls ，滑动性能，fps 是否掉帧的问题，这个工具勾选后都能通过可视化的方式看到你页面的绘制情况
性能检测工具
当你页面遇到性能问题，或者有些内存泄露或者卡死的情况，可以通过性能监视器去看看页面在渲染过程中的各项数据情况
总结：
今天就写这么多，后面还有一个小软文！
