目錄
2. Store as global (存儲爲一個全局變量)
1. copy(...)
你可以通過全局的方法 copy() 在 console 裏 copy 任何你能拿到的資源。例如 copy($_) 或 copy($0)
2. Store as global (存儲爲一個全局變量)
如果你在 console 中打印了一堆數據 (例如你在 App 中計算出來的一個數組) ，然後你想對這些數據做一些額外的操作比如我們剛剛說的 copy (在不影響它原來值的情況下) 。 那就可以將它轉換成一個全局變量，只需要 右擊 它，並選擇 “Store as global variable” (保存爲全局變量) 選項。
第一次使用的話，它會創建一個名爲 temp1 的變量，第二次創建 temp2，第三次 ... 。通過使用這些變量來操作對應的數據，不用再擔心影響到他們原來的值。
3.保存堆棧信息( Stack trace )
大多數情況下都不是一個人開發一個項目，而是一個團隊協作，那麼 如何準確的描述問題，就成爲了溝通的關鍵 ，這時候 console 打印出來的堆棧跟蹤的信息對你和同事來說就起大作用了，可以省去很多溝通成本，所以你可以直接把堆棧跟蹤的信息保存爲一個文件，而不只是截圖發給對方：
4.直接Copy HTML
幾乎所有人都知道，右擊或者點擊在 HTML 元素邊上的省略號 (...) 就可以將它 copy 到剪貼板中
，但是你不知道的是：古老的[ctrl] + [c]大法依舊可用
5.使用 Command
我們直接可以直接看到的 DevTools 的功能，其實只是有限的一部分，怎麼去探索更多的功能呢？
Command 菜單可以幫助我們快速找到那些被隱藏起來的功能，這也是它本身必不可少的原因。
- 在
Chrome的調試打開的情況下 按下 [Ctrl]+[Shift]+[P](Mac：[⌘]+[Shift]+[P]) - 或者使用
DevTools的dropdown按鈕下的這個選項:
下圖中，我整理了可供選擇的命令列表，歸爲幾個部分：
5.1 截屏的新姿勢
當你只想對一個特別的 DOM 節點進行截圖時，你可能需要使用其他工具弄半天，但現在你直接選中那個節點，打開 Command 菜單並且使用 節點截圖 的就可以了。
不只是這樣，你同樣可以用這種方式 全屏截圖 - 通過 Capture full size screenshot 命令。請注意，這裏說的是全屏，並不是嵌入頁面的一部分。一般來說這可是得使用瀏覽器插件才能做到的事情！
5.2 快速切換面板
DevTools 使用雙面板佈局，形式一般是：元素面板 + 資源面板 ，它根據屏幕可用的部分，經常將不同面板橫向或者縱向的排列，以適合閱讀的方式展示出來。但有時候我們並不喜歡默認的佈局。
你是否想過要重置 DevTools 呢？將 樣式面板 從 html預覽 的底部移動到右邊或者周圍其他的位置呢？是的，這就是下面要介紹的 😉
打開 Commands 菜單並且輸入 layout ，你會看到 2 到 3 個可供選擇的項(這裏不再顯示你已經激活的選項)：
- 使用橫向面板佈局
- 使用縱向面板佈局
- 使用自動面板佈局
5.3 快速切換主題
在 Commands 菜單中尋找與 theme 相關的選項，實現 明亮 & 暗黑 兩種主題之間的切換：
6. 代碼塊的使用
Snippets 的用武之地：它允許你存放 JavaScript 代碼到 DevTools 中，方便你複用這些 JavaScript 代碼塊：
進入到 Sources 面板，在導航欄裏選中 Snippets 這欄，點擊 New snippet(新建一個代碼塊) ，然後輸入你的代碼之後保存，大功告成！現在你可以通過右擊菜單或者快捷鍵： [ctrl] + [enter] 來運行它了：
當我在 DevTools 中預設了一組很棒的代碼塊以後，甚至都不必再通過 Sources 來運行它們。使用 Command Menu 纔是最快的方式。只需在它的輸入框中輸入 ! ，就可以根據名字來篩選預設代碼塊：
