【譯】你不知道的Chrome調試工具技巧第六天：command 菜單

時間 2019-11-05

標籤不知道 chrome 調試工具技巧第六 command 菜單欄目 Chrome 简体版

原文原文鏈接

特別聲明

本文是做者 Tomek Sułkowski 發佈在 medium 上的一個系列。據做者透露一共有24篇，一直更新到12月24日
版權歸原做者全部。
html

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

譯者在翻譯前已經和做者溝通獲得了翻譯整個系列的受權。
爲了避免影響你們閱讀，受權的記錄在這裏
git

正文

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

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 按鈕的這個選項:

能夠看到命令的輸入以及一系列供你選擇的命令。我在下圖按照選擇的類型分組排列了這些命令：編輯器

順便說一句. 我我的認爲上面這張圖，充分說明了 DevTools 有多麼強力！工具

讓咱們一塊兒來看看隱藏在這裏的精華吧？佈局

18.截屏，大小通吃

若是你想對某個特別的 DOM 節點進行截圖，選中那個節點，打開 Command 菜單而且尋找節點截圖的命令。post

更好用的是：一樣能夠用這種方式全屏截圖 - 使用 Capture full size screenshot 。請注意，咱們說的是全屏，並非嵌入頁面的一部分。我記得這但是得使用瀏覽器插件才能作到的！

19.快速切換面板

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

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

打開 Commands 菜單而且輸入 layout ,你會看到 2 到 3 個可供選擇的項(當前你已經激活的選項不會在這裏顯示)：

使用橫向面板佈局
使用縱向面板佈局
使用自動面板佈局

選擇你須要的

20.快速切換主題

你是否討厭忽然的強光，而且沒法忍受一直看着白光閃閃的屏幕？或者你一直都在黑暗的模式下工做，但忽然太陽出來了，照在你的 DevTools 上致使你什麼都看不到？

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

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

慣例：若是你從這裏學到了一些新東西

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

其餘系列

其餘此係列的文章，立刻就會翻譯出來，到時會貼出對應的連接在此處。

寫在最後

若是你對個人翻譯表示確定，也能夠關注我一波哦~ 順便個人開源項目，求一波 star→ 看這裏, 美麗的博客系統

關於此次翻譯，做者的回覆

相關標籤/搜索

【譯】你不知道的Chrome調試工具技巧 第六天：command 菜單