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

4,101

特别声明

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

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

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

正文

在马上就要迎来假期的这 24 天里,我将会发布一系列短篇的文章,关于如何更加有意思的使用开发工具,昨天我们看了一些可以提高 consolelog 可读性的方法。 今天让我们来谈谈隐藏在 DevTools drawer 中的强大功能集:

50. The DevTools drawer

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

要访问它,当你在 DevTools(任何选项卡) 中时,按 [esc] 。 再次按 [esc] 隐藏它:

默认情况下,你会看到一个 console 选项卡。 这与主面板的 console 完全相同。 这就是为什么它(主面板)会显示除了 console 之外的每个主要标签( ElementsSourcesNetwork ...)- 这里显示(Console)没有实际意义。

同时可以看到,这样显示 console 很方便,例如在 Elements 面板中(同时看到 console 面板)。

但那并不是所有在 Drawer 中隐藏的东西。

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

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

要打开完整选项列表,点击主页面在 Drawerconsole 面板前面的 图标。另外,你也可以打开 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→ 看这里, 美丽的博客系统

作者在Twitter上推荐我们的中文翻译啦