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

特别声明

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

作者在Twitter上推荐我们的中文翻译啦,截图在最后

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

正文

在马上就要迎来假期的这 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)没有实际意义。

同时可以看到这样的 console 很方便，例如在 Elements 面板中(同时看到 console 面板)。但那并不是所有在 Drawer 中隐藏的东西。

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

Drawer 里隐藏着许多其他功能，大多数时候你可能不需要用到它们，这也是它们为什么被隐藏起来的原因，然鹅，你可以直接挑选，选择你想展示在这里的功能。

扫描二维码关注公众号，回复： 4579550 查看本文章

要打开完整选项列表，点击主页面在 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→ 看这里, 美丽的博客系统