【Chrome】1039- 你不知道的 Chrome DevTools 玩法

叁歲伎倆 2022-09-03 01:25 155阅读 0赞

> 笔者在前段时间的开发时，需要通过 `Chrome DevTools`来分析一个接口，调试中发现了控制台中的 `copy` 函数，非常的好用，进而发现了新世界，学习到了 Chrome 一些奇怪的调试技巧，这里总结分享给大家，希望能对各位的开发起到帮助！

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

## 开发者工具函数 ##

### copy ###

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

`copy` 接受一个变量作为参数，如果有多个参数，则忽略第一个后面的所有参数，当需要复制不存在变量名的数据时，可以配合 `Store As Global` 来使用。

![2691b93f2261314c34d3e9c2dbc49089.gif][]

Store As Global

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

![1ed597f827c5e97f6052412fa557c801.gif][]

这个 `$` 和 `jQuery` 中的 `$` 有部分相似之处，均可以作为选择器来使用，这里依次介绍其用法。

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

根据这个操作可以很轻易的复制一个元素，并对其执行一些 DOM 操作。

![bd118b007430c164edbb2e13fbc40080.gif][]

还可以作为选择器使用，其中 有两种用法，分别是单 `$` 和双 `$`，需要注意的是，双 `$` 返回的并非 `NodeList`而是一个纯正的数组，直接方便了我们在控制台调用API????。

![5bdda6be1962303c785b75bd1534aa77.gif][]

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

![b3665e38de7c8443cd4776c525f3d63b.png][]

这里可以看到并不会重新计算一遍结果，而是直接引用。

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

![db0f5f918a0204164b7a6c6f594501b3.gif][]

此时就可以在 `Console` 中使用 `Lodash` 了！

### getEventListeners ###

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

![851bf86ec475f8be6d218ce6fca2d167.png][]

### monitor ###

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

![9167ab94e358f3dc1703179a484734d9.png][]

### Preserve Log ###

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

![10adf4557a0dbf36cf16afaff8aff807.gif][]

inspect

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

![bfabbed89d400f80b2429cf013d96593.gif][]

元素面板

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

![22e793cee9660c1b204da9766842701f.gif][]

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

![36595e2236aeae8af2d67af964926131.gif][]

Layout

`Layout` 是归属于元素面板的子面板，在其中可以查看元素的布局，特别是对于 `flex && grid` 来说，简直是好用的不得了，接下来我们先看 `grid` 布局的操作:

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

![838e079d277fb1ea745ec70395898c1d.gif][]

当然这还不够，我们还想要知道更详细的信息，比如每个格子所占的容量，宽度是多少，可以点击 `Overlay display settings` 下的选项来操作。

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

![a32820da0bb8fc55ca7d6e0dbb89f0fc.gif][]

后续三个选项分别为

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

文字描述可能看起来不好理解，下面有动图挨个解释????。

![94ec2d1373a6f1890554f9abc7951642.gif][]

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

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

![cf7a3054693d0294c5794a64e8694205.gif][]

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

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

![894d9d0775b21ae7f1b9c211b3be80dd.gif][]

Animations动画组

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

![46fc4171f3f8c7a379514755456b0398.gif][]

里面的功能异常强大，能够捕捉所有当前在运作的动画组，并且修改其速度和耗时，在需要多个动画配合的时候非常好用。这里是 Codepen的官网 可通过它来感受 `Animations` 的强大，其由上至下分为4个区域:

1.  最上方的区域可以清除所有捕捉的动画组，或者更改当前选定动画组的速度。
2.  第二行可以选择不同的动画组，此时下方面板将会更新为当前动画组的动画时间线。
3.  在中间拥有时间线的区域，可以理解为动画的进度条，可以通过拖动来跳转到动画对应的时间点。
4.  在最下方的区域里，可以修改选定的动画。

![8fb042deb8dc3ca81b4c05e4d5ec94d2.png][]

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

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

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

![e157115c7a269ff3584eee1f9bffc451.gif][]

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

## 完结撒花 ##

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

![3faeb851c735f92f88cc7e3259f2b80c.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![f49c128fd5258951b9969c4fed0cddbd.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[2691b93f2261314c34d3e9c2dbc49089.gif]: /images/20220829/49b65d21276644b28e928c608d871ba3.png
[1ed597f827c5e97f6052412fa557c801.gif]: /images/20220829/f7b0cdfead954fcc95c48fe39897f229.png
[bd118b007430c164edbb2e13fbc40080.gif]: /images/20220829/c552b9d113fd4a42b731b57b846da3a7.png
[5bdda6be1962303c785b75bd1534aa77.gif]: /images/20220829/c96f62cb124f452084eefbd942272266.png
[b3665e38de7c8443cd4776c525f3d63b.png]: /images/20220829/d15d9071aa8d41e9b57cf1b256623681.png
[db0f5f918a0204164b7a6c6f594501b3.gif]: /images/20220829/b4e80bcdd9b440c78620f75d5161138e.png
[851bf86ec475f8be6d218ce6fca2d167.png]: /images/20220829/64c25fd1e272427d976610ec3ccc455c.png
[9167ab94e358f3dc1703179a484734d9.png]: /images/20220829/89b7096509a3462ca3252e34cbaf9323.png
[10adf4557a0dbf36cf16afaff8aff807.gif]: /images/20220829/a45aa9f98160482d9855f70a3addd0e4.png
[bfabbed89d400f80b2429cf013d96593.gif]: /images/20220829/588939226db94c64a954a57e73d7a6a2.png
[22e793cee9660c1b204da9766842701f.gif]: /images/20220829/22d7e4dc63ae415a9a25bc24b26cac85.png
[36595e2236aeae8af2d67af964926131.gif]: /images/20220829/9ebb06475b5a468aaf771ef4eeb2d52d.png
[838e079d277fb1ea745ec70395898c1d.gif]: /images/20220829/e5a3d43f3805492e8031b2115ee6b70b.png
[a32820da0bb8fc55ca7d6e0dbb89f0fc.gif]: /images/20220829/cadfe1e5d4d84eee9bbe78e056a67b6b.png
[94ec2d1373a6f1890554f9abc7951642.gif]: /images/20220829/099386f3705d4b738bdec369eda27859.png
[cf7a3054693d0294c5794a64e8694205.gif]: /images/20220829/4617fb3013a74512b0b8c7da97083d63.png
[894d9d0775b21ae7f1b9c211b3be80dd.gif]: /images/20220829/91703379c73f49388a69e8dc017fb4ee.png
[46fc4171f3f8c7a379514755456b0398.gif]: /images/20220829/e85f0c41b0de413d96f147fb8ac319d4.png
[8fb042deb8dc3ca81b4c05e4d5ec94d2.png]: /images/20220829/31e7e7b2157349b08a9a1530fa86d93a.png
[e157115c7a269ff3584eee1f9bffc451.gif]: /images/20220829/b52bf600a76d4393887165a713609d00.png
[3faeb851c735f92f88cc7e3259f2b80c.gif]: /images/20220829/ad486424d090464bb5a737d4cca47c00.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[f49c128fd5258951b9969c4fed0cddbd.gif]: /images/20220829/d447007e29f84320823c87d73522e0b1.png