在 Chrome 控制台可以玩的两个骚操作，你知道吗？

在日常的前端开发中，我会经常使用 Chrome 开发者工具调节样式、查看日志、追踪错误。这给我的开发工作带来了很大的便利。

在 Chrome 控制台中，就有两个非常方便且鲜为人知的骚操作，可以供我们使用：一个是可以在控制台里直接使用 await 关键字；另一个就是可以使用 $ 和 $$ 查找元素。

await

await 是 ES2017 引入异步函数这个特性时增加的一个关键字，除此之外还增加了一个 async。用 async 关键字修饰的函数称为异步函数，而 await 只能在异步函数中使用。

虽然使用异步函数能让我们写出比 Promise API 更加简洁的代码，但由于“await 只能在异步函数中使用”这个限制，在脚本中直接使用 await 关键字是会报错的。

根据错误提示，我们稍加修改，将 await 关键字包装在异步函数，就 OK 了。

而在 Chrome 控制台中使用就没有这样的限制，我们可以直接使用 await：

$ 和 $$

document.querySelector 和 document.querySelectorAll 是两个提供给我们查找 DOM 元素的 API。Chrome 控制台为它们起了别名：$ 和 $$。

使用 $：

使用 $$：

这里需要注意的是，$$ 的返回结果集并不是像使用 document.querySelectorAll 一样返回一个 NodeList，而是一个数组。

参考链接

1. TWO GOTCHAS IN CHROME DEVELOPER TOOL CONSOLE, by Sung M. Kim.
2. Console Utilities API Reference, by Kayce Basques.

贡献指北

感谢你花费宝贵的时间阅读这篇文章。

欢乐的时光总是短暂的，文章到此结束了 ?。如果你觉得我的这篇让你的生活美好了一点点，欢迎鼓（diǎn）励（zàn）?。如果能在文章下面留下你宝贵的评论或意见是再合适不过的了，因为研究证明，参与讨论比单纯阅读更能让人对知识印象深刻?。

（完）