【譯】你不知道的Chrome除錯工具技巧 第四天：the Elements panel（元素面板）
特別宣告
本文是作者 Tomek Sułkowski 釋出在 medium 上的一個系列。據作者透露一共有24篇，一直更新到12月24日
版權歸原作者所有。
前兩篇的翻譯連結我已經給到了作者本人，雖然他不理解中文，但是他還是很開心哈哈,截圖在最後
譯者在翻譯前已經和作者溝通得到了翻譯整個系列的許可。
為了不影響大家閱讀，獲得許可的記錄會放在本文的最後~
正文
在馬上就要迎來假期的這 24 天裡，我將會發布一系列短篇的文章，關於如何將開發工具使用得更加有意思，昨天我們說到了第11 個,所以今天我們就從12個，元素面板(Element panel)開始：
12. 通過'h'來隱藏
你可以通過簡單的按一下'h'來隱藏你在元素面板中選擇的元素。再次按下'h'可以使它出現。這在某些的時候是很有用的，例如你想截圖，但是你又不想裡面包含一些敏感資訊的情況。
13. 拖動 & 放置 元素
Want to check how a part of your html will look in a different place of the DOM tree, just drag and drop it, like you would with anything anywhere on your machine :-)
當你想要看看你頁面的一部分在DOM樹的不同部分是如何顯示的時候，只需要拖動放置它(到指定的位置)，就像在你機器上任何其他地方一樣 :-)
14. 或者使用control!(按鈕)
如果你只是想移動你當前選中的元素，在DOM結構中往上一點或者往下一點，而不是拖動和放置，你同樣可以使用[ctrl] + [⬆]
[ctrl] + [⬇] ([⌘] + [⬆] /[⌘] + [⬇] on Mac).
15. 它是一個基礎編輯器
從某一點來看，我們可以拖動，放置，編輯，複製(當然，以及使用 [ctrl]+[v] 來貼上), 所以當我們發現我們可以在元素面板裡可以把我們的HTML結構搞得一團糟，這並不會讓我們覺得驚訝。在任意一個編輯器中都有一個標準：
使用[ctrl] + [z] ([⌘] + [z] on Mac)撤銷我們的任何改動。 使用 [ctrl] + [shift] + [z]重新編輯我們的任何修改。
慣例： 如果你從這裡學到了一些新東西
→ 你可以點個贊再走嘛~
→ 關注我的 Twitter
其他系列
其他此係列的文章，馬上就會翻譯出來，到時會貼出對應的連結在此處。
- 【譯】你不知道的Chrome除錯工具技巧 第一天：console中的'$'
- 【譯】你不知道的Chrome除錯工具技巧 第二天：copying & saving
- 【譯】你不知道的Chrome除錯工具技巧 第三天：console methods
寫在最後
如果你對我的翻譯表示肯定，也可以關注我一波哦~ 順便我的開源專案，求一波 star→ 看這裡, 美麗的部落格系統