最近一直在思考，自己是否对工具缺乏思考，每天都在用那几个功能，从来不关心它的迭代，在我手里貌似并不能体现出它应有的价值。
所以想仔细梳理下，探索下那些不为人知但是很实用的功能。
注： 要求新版浏览器。
1. 截图功能
我们平常使用截图都用的第三方，外网用的weChat，内网用的Snipaste，新版的谷歌浏览器已经内置了截图功能。
首先打开F12，随后按快捷键 Ctrl + Shift + P，然后输入截图/Capture。
出现了如下四个选项，点击后，就会下载以域名为前缀的截图图片。
这四个选项基本涵盖了我们的需求。
当前节点屏幕截图： 这个就是先选中部分代码块，点击当前节点屏幕截图后，会截图当前代码块的内容，这个功能，我们有时想精确截图的话可以使用这个功能。
截取区域屏幕截图：这个就是我们平常使用的截图功能，点击截取区域屏幕截图后，会出现十字星，框选出想截图的部分就可以了。
**获取完整尺寸屏幕截图：**这个可以截取完整尺寸的网页，就算不在屏幕范围内，也会截图为长截图，这个功能还是很棒的，对吧。
**截取屏幕截图：**这个截图规则为截取当前可视区域的截图，也就是网页中你看得到的部分，被F12挡住的区域则不会截图进来。
注： 无法截取开发者工具(F12)部分。
2. CSS概览
首先打开F12，随后按快捷键 Ctrl + Shift + P，然后输入CSS概览/CSS Overview。
这个功能可以对当前网页的CSS进行归纳总结。
我们可以利用这个功能做什么呢，比如说媒体查询数量：
我们可以对整体的样式做一个检视，同时也方便我们对公共样式做梳理。
对比度问题，也可以对我们的UI样式提供一些参考。
背景颜色都罗列出来了，我们可以考虑下样式统一性的问题。
内嵌样式有些多，可能是css原子化，不是的话，是否需要规范下。
总的来说，这个功能对我们还是有锦上添花的作用的。
3. 模拟功能
这是一个非常有意思的功能，它可以帮助你感受到实力缺陷小伙伴的视角。
首先打开F12，随后按快捷键 Ctrl + Shift + P，然后输入模拟/Emulate。
让我们看下模拟视力模糊的效果：
再看看模拟蓝色盲的效果：
相信这个功能对一些服务于特殊群众的小伙伴们是有帮助的。
4. Recorder
这是一个很棒的功能，Recorder顾名思义---记录员，他可以记录下用户和网页的交互(意念艾特了下公司的交互)。
首先打开F12，随后按快捷键 Ctrl + Shift + P，然后输入Recorder。
点击开始，然后输入本次操作名称： 掘金黑色的枫主页交互梳理。
然后我们就可以到处点点看，就会记录下我们的操作。
点击结束之后可以结束录制，我们可以回访我们的操作，还可以对我们的操作进行分析。
分析中包括了屏幕截图，内存，网页指标，妥妥的精工利器。
从这里我们会了解到很多，比如事件日志，我们可以知道我们触发操作后都发生了什么。
而调用树，我们可以知道异步任务，定时器，动画帧，垃圾回收等的执行。
Recorder确实对我们网页分析有很大的帮助。
5. 性能监视器
又到了避不开的话题，性能优化，我梳理了一篇关于性能优化的文章：
现在又多一个定位方法，性能监视器。
首先打开F12，随后按快捷键 Ctrl + Shift + P，然后输入性能监视器/monitor。
数据非常直观，浏览网页的时候可以打开，以供参考。
6. JavaScript性能剖析器
也是做性能分析的工具。
首先打开F12，随后按快捷键 Ctrl + Shift + P，然后输入性能剖析器/profiler。
我们点击开始后浏览我们的网页，就会出现一份性能剖析报告。
很多小伙伴会想，分享这么多方法肯定用不过来，为什么要分享这么多。
怎么说呢，每一种方法都会有它适合出现的场合，就像每一朵花都有它自己的花季。
7. 传感器
首先打开F12，随后按快捷键 Ctrl + Shift + P，然后输入传感器/sensor。
可以模拟定位，模拟手机型号，模拟手机方向以及活跃状态。
(听说可以远程公司打卡，要不要试试！)
8. 扩展程序
这个是我们经常会用到的，但是貌似这一块的功能并没有被大家所重视，好好利用浏览器插件可以带给我们很多帮助。
**Allow-Control-Allow-Origin：**这个浏览器插件可以帮助我们解决跨域问题，还在nginx+hosts？nonono，下载这个就可以搞定。
Ajax Interceptor： 这个浏览器插件可以帮助我们mock数据，把接口和数据填写在里面，这个插件会自动拦截并mock。
Window Resizer： 可以把我们的浏览器变成不同的分辨率，调节响应式的时候相信用的到它。
**沙拉查词：**内网环境确实比较需要他，毕竟很多报错都有点看不懂。
我用过最好的浏览器插件下载地址： crxdl.com/
