前言
作为一个前端开发，接触最多的就是浏览器了，浏览器最主流的莫过于Chrome，但是你真的知道怎么用好Chrome么，别划走，工欲善其事，必先利其器，给我十分钟，让你学会各种Chrome体操！！！
$的妙用
曾经，jQuery是我们赖以生存的利器，但是随着Vue，React等的崛起，jQuery也慢慢消失在我们的武器库中，不过，在DevTools中，$也有很大的作用。
$0
在Chorme的Elements中，$0表示对当前选中节点的引用，$1表示对上次选中的节点的引用，以此类推，一直到$4。可以看下面的操作示例：
$
如果没有全局声明过$变量，那么在console中，它就是docuemnt.querySelector的别名，看下面操作示例：
$_
在console中，$_表示上一次执行的结果的引用，看下面操作示例：
$i
开发过程中，我们避免不了需要去安装各种的插件或者工具辅助我们开发，例如lodash或者dayjs甚至vue这些，但是如果我们只是想玩一玩某个工具库，单独去搞一个项目未免过于麻烦。这个时候，我们只需要使用Chrome的插件Console Importer就可以。
安装好以后，就可以使用$i来下载某个插件了，示例如下：
编辑页面
当我们需要改动页面，比如为某个text增加一些文字来预览文字超出时候的样式等等，常常会去Element中找到这个节点再编辑，这显得过于麻烦。
所以，我们可以在console中输入document.body.contentEditable='true'或者document.designMode='on'就可以实现编辑页面的功能了。下面是示例：
复制变量
在调试代码的时候，我们往往需要去复制一些变量，好二次运用，这个时候，我们可以使用自带的copy方法，看下面示例：
保存变量
同理，我们有时候需要把一个变量保存为全局变量，然后对他进行一系列的操作，这个时候，我们只需右击鼠标选择Store as global variable即可。
快速查看对象的key/value
类似于Object.keys()和Object.values()的功能，可以在Console中直接使用keys()和values()查看对象的key和values。
将对象数组转变为可视化表格
Devtools中提供了table()，可以将一个对象数组转换成表格，更方便的查看这个数据和属性。
css/js 覆盖率
DevTools中，有一个Show Coverage的面板（使用command/ctrl+shift+p打开命令），可以帮助我们查看css/js的具体覆盖情况，其中绿色的表示用到的代码，红色的代码没有用到的代码，示例如下：
复制图片为base64
现在，可以直接复制图片自动转换为base64了，只需要直接在Network面板中选中图片，然后右击，选中Copy image as data URI即可。
重发XHR请求
也许，当你需要重新发送请求时候，你会刷新页面或者点击某个按钮触发代码中的发送XHR请求的逻辑，但是其实有更简单的方法，只需要去Network面板，右击需要发送的请求，然后选择Replay XHR即可。
对请求进行特定过滤
有时候，一个页面请求太多，我们往往通过Network中的Filter筛选框去过滤请求，但是以前可能你只会按照名称去模糊过滤，其实还有更棒的过滤，例如：通过larger-than: xx筛选比xx更大数据的返回，通过status-code: xx筛选status为xx的请求，mime-type:xx选择类型为xx的请求等等：
拦截加载某个文件
有时候，我们可能需要在页面加载的一系列文件中，去拦截加载其中的某个或者某些文件，只需要在Network中，右击不想记载的文件，选中Block request URL即可：
捕捉屏幕截图
当我们需要在页面加载的时候，捕捉屏幕的一系列截图。那么只需要在Network中，将Capture screenshots勾选即可：
查看动画过程
作为一名前端开发，不可避免的需要写一些动画，所以我们有时候需要知道某些动画的动画过程，其实Devtools也为我们做好了，只需要打开animations控制板（使用command/ctrl+Shift+p打开命令）即可：
自定义代码片段
有时候，我们需要自定义一些代码片段，但是如果在console中，一个是不太好存储，二是不好查找和记忆，Devtools也想到了，只需要在Sources面板下的Snippets标签中，增加即可：
结语
当然Chrome还有很多的有趣又实用的功能，比如其中的Lighthouse用于性能检测，Memory用于内存堆栈的分析等等，这些大家可以自行玩一玩了。
