【译】你不知道的Chrome调试工具技巧第七天：异步console的趣味小窍门

特别声明

本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列。据作者透露一共有24篇，一直更新到12月24日
版权归原作者所有。

前两篇的翻译链接我已经给到了作者本人，虽然他不理解中文，但是他还是很开心哈哈,截图在最后

译者在翻译前已经和作者沟通得到了翻译整个系列的授权。
为了不影响大家阅读，授权的记录在这里

正文

在马上就要迎来假期的这 24 天里，我将会发布一系列短篇的文章，关于如何更加有意思的使用开发工具，昨天我们了解了 Command Menu 我们今天从 21 开始，说的是：

21. Console 是异步的

如今，越来越多与浏览器有关的API都是 基于Promise的 。当你使用 promise 的时候你通常使用 .then(处理方法) 或者将它 ( promise ) 包裹在 async 方法中，并且使用 await 来接收它的结果。

我们在 JavaScript/TypeScript 中大量使用这些东西，但是在 Console 中书写这样的结构，一点都不方便。

就是像下面这样

或者这样

额，太可怕了！我曾经在写这段代码时失败了两次，漏写了一个括号，或者是在我完成输入之前就意外的（触发）执行了这段代码。

但如果 console 默认就被 async 包裹呢？

你猜怎么着，真是这样！你可以直接使用 awit ：

事实上在 Console 中使用 promise 比在源码中使用要简单得多！

22.用你的异步`console` 来看一些更酷的东西

我和你一样，都觉得 fetch 的例子相当无聊， -- 这儿有一些新玩法：通过你的 console 来获取到更多有意思的信息:

Storage 系统的占用数和空闲数

await navigator.storage.estimate()
复制代码

你的设备的电池信息

为了效果更好，把这条 tip 和前几天中提到的 console.table 合并使用：

敲黑板（划重点）：这是一条不推荐使用的API ,尽管看起来这么酷炫...

媒体能力

Cache storage keys

(译者注：Cache storage keys 一般用来对 request 和 response 进行缓存)

更多的例子不胜枚举。能够在 console 中轻松的获取 promise 包裹的值绝对是相当方便的。

今天的分享就到这里~

惯例：如果你从这里学到了一些新东西

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

其他系列

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

【译】你不知道的 Chrome 调试工具技巧第一天：console 中的'$'
【译】你不知道的 Chrome 调试工具技巧第二天：copying & saving
【译】你不知道的 Chrome 调试工具技巧第三天：console methods
【译】你不知道的 Chrome 调试工具技巧第四天：the Elements panel（元素面板）
【译】你不知道的 Chrome 调试工具技巧第五天：console 的 log 中,让人疑惑的案例
【译】你不知道的 Chrome 调试工具技巧第六天：command 菜单
【译】你不知道的 Chrome 调试工具技巧第七天：异步 consle 的趣味小窍门
【译】你不知道的 Chrome 调试工具技巧第八天：Color picker（颜色选择器）
【译】你不知道的 Chrome 调试工具技巧第九天：给 console 计时
【译】你不知道的 Chrome 调试工具技巧第十天：custom formatters（自定义格式转换器）
【译】你不知道的 Chrome 调试工具技巧第十一天：style editors continued（样式编辑器后续）
【译】你不知道的 Chrome 调试工具技巧第十二天：忍者日志打印！(the ninja logs)
【译】你不知道的 Chrome 调试工具技巧第十三天：对象 & 方法
【译】你不知道的 Chrome 调试工具技巧第十四天：其他快捷键~
【译】你不知道的 Chrome 调试工具技巧第十五天：Twitter day~
【译】你不知道的 Chrome 调试工具技巧第十六天：断点
【译】你不知道的 Chrome 调试工具技巧第十七天：再会 console
【译】你不知道的 Chrome 调试工具技巧第十八天：Drawer 里的秘密
【译】你不知道的 Chrome 调试工具技巧第十九天：深入 Drawer
【译】你不知道的 Chrome 调试工具技巧第二十天：Workspace的黑魔法
【译】你不知道的 Chrome 调试工具技巧第二十一天：Snippets(代码块)
【译】你不知道的 Chrome 调试工具技巧第二十二天：network
【译】你不知道的 Chrome 调试工具技巧第二十三天：Drawer tips 后续
【译】你不知道的 Chrome 调试工具技巧第二十四天：最后一天，元旦牛逼

写在最后

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

关于这次翻译，作者的回复