icon-cookie
The website uses cookies to optimize your user experience. Using this website grants us the permission to collect certain information essential to the provision of our services to you, but you may change the cookie settings within your browser any time you wish. Learn more
I agree
blank_error__heading
blank_error__body
Text direction?

【译】你不知道的Chrome调试工具技巧 第一天:console中的 '$'

特别声明

本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列。
版权归原作者所有。
译者在翻译前已经和作者沟通得到了翻译整个系列的授权。
为了不影响大家阅读,获得授权的记录会放在本文的最后~

正文

在马上就要迎来假期的这24天里,我将会发布一系列短篇的文章,关于如何更加有意思的使用开发工具,让我们一起来看看吧!

1. $0

ChromeElements 面板中,$0 是当前我们选中的 html 节点的引用。

理所当然,$1 就是我们上一次选择的节点的引用,$2 是在那之前选择的节点的引用,等等。一直到 $4

你可以通过其他引用来尝试相关操作 (例如: $1.appendChild($0))

2. $$$

如果你没有在 App 中定义过 $ 变量 (例如 jQuery )的话,它在 console 中就是对这一大串函数 document.querySelector 的别名。

如果是 $$ 就更加厉害了,还能节省更多的时间,因为它不仅执行 document.QuerySelectorAll 并且它返回的是:一个节点的 数组 ,而不是一个 Node list

Array.from(document.querySelectorAll('div')) === $$('div')$$('div') 哪一种方式更加优雅呢?

3. $_

$_ 是对上次执行的结果的引用。

4. $i

Chrome插件:Console Importer 的帮助之下,你可以快速的在 console 中引入和把玩一些 npm 库。

直接运行例如 $i('lodash') 或者 $i('moment') 几秒钟之后,就可以获取到 lodash / momentjs 了。

这就是今天的内容啦,简短但是暖心~ 惯例: 如果你从这里学到了一些新东西

→ 你可以点个赞再走嘛~
→ 关注我的Twitter Tomek Sułkowski

其他系列

其他此系列的文章,马上就会翻译出来,到时会贴出对应的链接在此处。

如果你对我的翻译表示肯定,也可以关注我一波哦~顺便求一波star→ 看这里, 美丽的博客系统

授权记录

Measure
Measure
Related Notes
Get a free MyMarkup account to save this article and view it later on any device.
Create account

End User License Agreement

Summary | 1 Annotations
$0 是当前我们选中的 html 节点的引用
2020/06/10 00:45