【譯】你不知道的 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 裡隱藏著許多其他功能，大多數時候你可能不需要用到它們，這也是它們為什麼被隱藏起來的原因，然鵝，你可以直接選擇想要在這裡展示的功能。

要開啟完整選項列表，點選主頁面在 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 裡的祕密