你不知道的 Chrome DevTools 玩法

笔者在前段时间的开发时，须要经过 Chrome DevTools来分析一个接口，调试中发现了控制台中的 copy 函数，很是的好用，进而发现了新世界，学习到了 Chrome 一些奇怪的调试技巧，这里总结分享给你们，但愿能对各位的开发起到帮助！数组

多图预警，建议在Wifi环境下阅读本文章。markdown

开发者工具函数

copy

copy 函数可让你在 console 里拿到任意的资源，甚至包括一些变量，在复制一些特别冗长的数据时特别有用，当复制完成后，直接使用 ctrl + v 便可。dom

copy 接受一个变量做为参数，若是有多个参数，则忽略第一个后面的全部参数，当须要复制不存在变量名的数据时，能够配合 Store As Global 来使用。ide

Store As Global

当咱们从控制台获取一些数据却没有变量名时（在开发时特别常见），能够经过右键点击数据旁的小三角形，经过其来储存为全局变量，变量名为 temp1 一直延续下去，就能够配合 copy 获取变量名打印了，该功能对 HTML 元素一样适用。函数

$

这个 $ 和 jQuery 中的 $ 有部分类似之处，都可以做为选择器来使用，这里依次介绍其用法。工具

首先是 $0 ~ $4 能够获取点击的 HTML 元素，其中 $0 对应着最后一次点击的元素，$1 次之，依序排列直到$4 。oop

根据这个操做能够很轻易的复制一个元素，并对其执行一些 DOM 操做。布局

还能够做为选择器使用，其中有两种用法，分别是单 $ 和双 $，须要注意的是，双 $ 返回的并不是 NodeList而是一个纯正的数组，直接方便了咱们在控制台调用API😉。学习

有时仅仅须要获取上一次输出没有变量名的数据该怎么办？这时你心中应该有一个答案，就是经过 Store As Global 把其变为一个变量，可是这样太麻烦了，$_ 能够帮你解决这个烦恼，其返回结果就是上次执行结果的引用。flex

这里能够看到并不会从新计算一遍结果，而是直接引用。

最后关于$ 命令操做是重磅戏，能够经过 $i 安装 NPM 库，这是一条不曾设想过的道路，笔者查阅发现时，属实被震撼到了。在Console Importer 插件的帮助之下，就能够帮助咱们实现这一操做！首先在谷歌应用商店安装好该插件后，在命令台输入 $i('lodash') 后，神奇的事情就会出现。

此时就能够在 Console 中使用 Lodash 了！

getEventListeners

能够方便的获取元素绑定的事件，特别是配合 $ 使用，不过获取事件功能也能够在 Element 中查看，主要是当元素嵌套层级深且复杂时，能够不用点击而经过选择器来查看元素。

monitor

这是 DevTools 自带的监听器，简单的说明就是监听函数的函数，使用起来很简单，直接套娃就行。目前没发现有什么特别方便的地方和使用它的需求，了解便可。

Preserve Log

在咱们调试页面时，常常遇到页面跳转或刷新的状况，此时打印的输出会被刷新掉😭，看不到想要的数据。在调试面板最右边的齿轮图标处，有 Preserve Log选项，能够保存上一次打印的输出，这里用 Math.random 做演示。

inspect

inspect 提供了一个能够快速跳转到 DOM 元素对应位置的方法，对于一些嵌套层级复杂或者未知的元素，能够经过 inspect 配合调试，将元素的选择器至传入函数中，则会自动跳转到其对应位置。

元素面板

元素面板即为 Elements 面板的内容，咱们通常用其获取对应元素的信息，好比 Styles && Computed && Layout 等，其中咱们会对元素作一些操做，好比操做一个元素的显隐要怎么办？其中一个答案就是右键该元素，而后选择 Hide Element，但这样作有点麻烦，能不能有更好更快的办法呢？答案是有的，直接选择该元素，在键盘上按下 "h" 便可切换元素的显隐状态，Amazing！

不只如此，还能够直接拖动元素达到调整元素位置的功能。

Layout

Layout 是归属于元素面板的子面板，在其中能够查看元素的布局，特别是对于 flex && grid 来讲，简直是好用的不得了，接下来咱们先看 grid 布局的操做:

当用户点击一个使用 grid 布局的元素时，则会显示出其全部的小方格。

固然这还不够，咱们还想要知道更详细的信息，好比每一个格子所占的容量，宽度是多少，能够点击 Overlay display settings 下的选项来操做。

其中第一个下拉框能够选择展现 line names 和 line numbers，也就是线段的别名和线段对应的序号。

后续三个选项分别为

显示轨道大小：切换以显示或隐藏轨道大小。
显示区域名称：在具备命名网格区域的网格的状况下，切换以显示或隐藏区域名称。
扩展网格线：默认状况下，网格线仅显示在带有display: grid或display: inline-grid设置在其上的元素内部；当打开此选项时，网格线沿每一个轴延伸到视口的边缘。

文字描述可能看起来很差理解，下面有动图挨个解释😊。

第一选项能够很清楚的看到每行每列的宽度，第二个选项能够看到每个“块”的别名，第三个选项可能看的不是很清楚，其延伸 grid 的线段至视口边缘，能够仔细观察最下方和最右方，发现会多了几条虚线。

在 Grid overlays 有一个颜色块和一个带有鼠标的虚线块，其功能也颇有用，分别是自定义每一个 grid 的网格覆盖颜色和突出显示网格。

都说到 grid 了，怎么能不提 flex ？目前在 Chrome 91 版原本看，调试 flex 的功能是要更多一些的，喜欢 grid 的不要担忧，在92版本会同步二者的功能！

这里介绍其最新的特性，经过元素面板的 Styles 子面板，在对应元素的样式里多了一个小按钮，点击该按钮可以很方便的切换 flex 的各类布局。

Animations动画组

还记得刚来组里时，第一个需求须要用到动画展现。当时调试动画全靠一点一点的数值修改，浪费了不少时间。最近发现调试工具中有动画组的概念，可以很方便的调试和观察动画。不过该功能隐藏的很深，藏在 More Tools 里。

里面的功能异常强大，可以捕捉全部当前在运做的动画组，而且修改其速度和耗时，在须要多个动画配合的时候很是好用。这里是Codepen的官网可经过它来感觉 Animations 的强大，其由上至下分为4个区域:

最上方的区域能够清除全部捕捉的动画组，或者更改当前选定动画组的速度。
第二行能够选择不一样的动画组，此时下方面板将会更新为当前动画组的动画时间线。
在中间拥有时间线的区域，能够理解为动画的进度条，能够经过拖动来跳转到动画对应的时间点。
在最下方的区域里，能够修改选定的动画。

在使用动画组捕捉动画后，咱们能够进行慢速播放，重播动画。把鼠标放在动画上面则能够看动画预览，这里最棒的就是能够体验不一样动画组合事后的效果，并修改动画组的时间与延迟，甚至是关键帧偏移。

能够拖动动画的实心圆，也就是其关键帧，来控制动画的持续时间（最左和最右的两个实心圆）。也能够拖动中间的实心圆来控制运动曲线，能够经过调试来得到最想要的效果。

中间有一条红色的线，能够拖动它来控制当前动画执行的过程在哪里，这里注意左侧的拖动和右侧动画的转变。

有了动画组，排列组合不再是梦！

完结撒花

本次介绍的功能可能是一些笔者认为实用的功能，好比各类命令行函数，又或者是 Chrome 的新特性，好比 flex && grid 的调试功能，这些功能在开发中如果处置得当，可以很好的提高开发效率，固然还有不少不少调试功能没有介绍，毕竟如何利用好 DevTools 也是一门很深的学问，这些特性就留在往后开发中挖掘再来补坑吧。