【译】你不知道的 Chrome 调试工具技巧第十八天：Drawer 里的秘密

特别声明

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

做者在Twitter上推荐咱们的中文翻译啦,截图在最后
git

译者在翻译前已经和做者沟通获得了翻译整个系列的受权。
为了避免影响你们阅读，受权的记录在这里
github

正文

在立刻就要迎来假期的这 24 天里，我将会发布一系列短篇的文章，关于如何更加有意思的使用开发工具，昨天咱们看了一些能够提升 console 的 log 可读性的方法。今天让咱们来谈谈隐藏在 DevTools drawer 中的强大功能集：异步

50. The DevTools drawer

Chrome DevTools 有不少部分，被分为 9 个 tab(标签页/选项卡) ( Elements , Console , Sources , Network , 等等...)- 但那仅仅是它的一部分而已！有一组平行的选项卡，被隐藏在主窗口之下。这个组合被称为 Drawer编辑器

要访问它，当你在 DevTools（任何选项卡） 中时，按 [esc] 。再次按 [esc] 隐藏它：工具

默认状况下，你会看到一个 console 选项卡。这与主面板的 console 彻底相同。这就是为何它(主面板)会显示除了 console 以外的每一个主要标签（ Elements ，Sources ，Network ...）- 这里显示(Console)没有实际意义。post

同时能够看到，这样显示 console 很方便，例如在 Elements 面板中(同时看到 console 面板)。开发工具

但那并非全部在 Drawer 中隐藏的东西。ui

51.The other tools in the drawer (drawer 中的其余工具)

Drawer 里隐藏着许多其余功能，大多数时候你可能不须要用到它们，这也是它们为何被隐藏起来的缘由，然鹅，你能够直接选择想要在这里展现的功能。spa

要打开完整选项列表，点击主页面在 Drawer 的 console 面板前面的 ⋮ 图标。另外，你也能够打开 Command Menu 而后输入 Drawer

好了，让咱们再看一遍全部的选项：

Animations
Changes
Console
Coverage
Network conditions
Performance monitor
Quick source
Remote devices
Rendering
Request blocking,
Search
Sensors
What’s new

嗯(第一声表示感叹)~~，那......(大脑飞速运转中)已共有 13 个新领域值得探索！

你可能已经猜到了，我会在这些东西里找到更多 tips 来展现... 可是让咱们把这些留到明天。

今天的分享就到这里~

惯例：若是你从这里学到了一些新东西

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

其余系列

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

写在最后

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

【译】你不知道的 Chrome 调试工具技巧 第十八天：Drawer 里的秘密