你不知道的 Chrome DevTools 玩法

2021-08-24 15:38:31 浏览数 (2)

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

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

开发者工具函数

copy

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

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

Store As Global

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

$

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

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

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

还可以作为选择器使用,其中 有两种用法,分别是单 和双 ,需要注意的是,双

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

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

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

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

getEventListeners

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

monitor

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

Preserve Log

在我们调试页面时,经常遇到页面跳转或刷新的情况,此时打印的输出会被刷新掉

0 人点赞