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

特别声明

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

正文

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

1. $0

在Chrome的Elements面板中,$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

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

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

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

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

其他系列

其他此系列的文章,马上就会翻译出来,到时会贴出对应的链接在此处。 如果你对我的翻译表示肯定,也可以关注我一波哦~顺便求一波star→ 看这里, 美丽的博客系统

许可记录

猜你喜欢

转载自juejin.im/post/5c09a80151882521c81168a2