【譯】你不知道的 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 裏的祕密