【譯】你不知道的Chrome除錯工具技巧 第六天：command 選單

dendoink發表於2018-12-10
Chrome除錯

特別宣告

本文是作者 Tomek Sułkowski 釋出在 medium 上的一個系列。據作者透露一共有24篇，一直更新到12月24日
版權歸原作者所有。

前兩篇的翻譯連結我已經給到了作者本人，雖然他不理解中文，但是他還是很開心哈哈,截圖在最後

譯者在翻譯前已經和作者溝通得到了翻譯整個系列的授權。
為了不影響大家閱讀，授權的記錄在這裡

正文

在馬上就要迎來假期的這 24 天裡，我將會發布一系列短篇的文章，關於如何更加有意思的使用開發工具，昨天我們完成了第 16 個,所以我們今天從這開始...

17. 開始使用 Command (命令) 選單 (如果你還沒有用過的話)

有一些 Dev Tools 的功能被深深的隱藏在特別的 皮膚/選單 中。甚至有一些還隱藏在他們（皮膚/選單）下面。這也是為什麼 Command 選單，是在 Dev Tools 中必不可少的一個工具。

如果你使用過 WebStorm 中的 Find Action (查詢動作) 或者 Visual Studio Code 中的 Command Palette 那麼 (Command 選單) 也是類似的功能。可以這樣調出它：

  • 在 Chrome 的除錯開啟的情況下 按下 [ Ctrl]+[Shift]+[P] (or [⌘]+[Shift]+[P] on Mac)
  • 或者使用DevTools 的 dropdown 按鈕的這個選項:

【譯】你不知道的Chrome除錯工具技巧 第六天：command 選單

可以看到命令的輸入以及一系列供你選擇的命令。我在下圖按照選擇的型別分組排列了這些命令：

【譯】你不知道的Chrome除錯工具技巧 第六天：command 選單

順便說一句. 我個人認為上面這張圖，充分說明了 DevTools 有多麼強力！

讓我們一起來看看隱藏在這裡的精華吧 ？

18.截圖，大小通吃

如果你想對某個特別的 DOM 節點進行截圖，選中那個節點，開啟 Command 選單並且尋找節點截圖的命令。

更好用的是：同樣可以用這種方式全屏截圖 - 使用 Capture full size screenshot 。請注意，我們說的是 全屏 ，並不是嵌入頁面的一部分。我記得這可是得使用瀏覽器外掛才能做到的！

【譯】你不知道的Chrome除錯工具技巧 第六天：command 選單

19.快速切換皮膚

DevTools 的部分使用雙皮膚佈局（例如：元素或者資源皮膚），DevTools 經常根據螢幕可用的部分，將它們橫向或者縱向的排列，以方便閱讀的方式展示。有時候你並不喜歡這樣佈局。

（你是否重置過 DevTools 呢？把 樣式皮膚 從 html預覽 的底部移動到右邊或者其他的周圍位置？是的，這就是我所說的?）

開啟 Commands 選單並且輸入 layout ,你會看到 2 到 3 個可供選擇的項(當前你已經啟用的選項不會在這裡顯示)：

  • 使用橫向皮膚佈局
  • 使用縱向皮膚佈局
  • 使用自動皮膚佈局

選擇你需要的

【譯】你不知道的Chrome除錯工具技巧 第六天：command 選單

20.快速切換主題

你是否討厭突然的強光，並且無法忍受一直看著白光閃閃的螢幕？或者你一直都在黑暗的模式下工作，但突然太陽出來了，照在你的 DevTools 上導致你什麼都看不到？

在 Commands選單中尋找與 theme 相關的選項，以實現在明亮&暗黑兩種主題之間的切換。

【譯】你不知道的Chrome除錯工具技巧 第六天：command 選單

好的，今天就分享這麼多啦~

慣例： 如果你從這裡學到了一些新東西

→ 你可以點個贊再走嘛~
→ 關注我：Twitter：Tomek Sułkowski

其他系列

其他此係列的文章，馬上就會翻譯出來，到時會貼出對應的連結在此處。

寫在最後

如果你對我的翻譯表示肯定，也可以關注我一波哦~ 順便我的開源專案，求一波 star→ 看這裡, 美麗的部落格系統

關於這次翻譯，作者的回覆

【譯】你不知道的Chrome除錯工具技巧 第六天：command 選單

相關文章