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

时间 2019-11-05

标签不知道 chrome 调试工具技巧第一天 console 栏目 Chrome 繁體版

原文原文链接

本文是做者 Tomek Sułkowski 发布在 medium 上的一个系列。
版权归原做者全部。
译者在翻译前已经和做者沟通获得了翻译整个系列的受权。
为了避免影响你们阅读，得到受权的记录会放在本文的最后~html

在立刻就要迎来假期的这24天里，我将会发布一系列短篇的文章，关于如何更加有意思的使用开发工具，让咱们一块儿来看看吧！vue

在 Chrome 的 Elements 面板中，$0 是当前咱们选中的 html 节点的引用。git

理所固然，$1 就是咱们上一次选择的节点的引用，$2 是在那以前选择的节点的引用，等等。一直到 $4github

你能够经过其余引用来尝试相关操做 (例如: $1.appendChild($0))web

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

若是是 $$ 就更加厉害了，还能节省更多的时间，由于它不只执行 document.QuerySelectorAll 而且它返回的是：一个节点的数组，而不是一个 Node listnpm

Array.from(document.querySelectorAll('div')) === $$('div') 和 $$('div') 哪种方式更加优雅呢？数组

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

在 Chrome插件:Console Importer 的帮助之下，你能够快速的在 console 中引入和把玩一些 npm 库。异步

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

这就是今天的内容啦，简短可是暖心~ 惯例：若是你从这里学到了一些新东西

→ 你能够点个赞再走嘛~
→ 关注个人Twitter Tomek Sułkowski

其余此系列的文章，立刻就会翻译出来，到时会贴出对应的连接在此处。

若是你对个人翻译表示确定，也能够关注我一波哦~顺便求一波star→ 看这里, 美丽的博客系统

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