【譯】你不知道的Chrome調試工具技巧第四天：the Elements panel（元素面板）

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

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

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

在立刻就要迎來假期的這 24 天裏，我將會發布一系列短篇的文章，關於如何更加有意思的使用開發工具，昨天咱們說到了第 11 個,因此今天咱們就從 12 個，元素面板( Element panel )開始：異步

能夠按下 'h' 來隱藏在元素面板中被你選中的元素。再次按下 'h' 使它出現。某些時候這是頗有用的，例如你想截圖，可是又不想裏面包含一些敏感信息。編輯器

當你想要看看頁面某部分在 DOM 樹的不一樣位置將如何顯示的時候，只需拖動而且放置它(到指定的位置)，就像在你機器上其餘任何地方同樣 :-)工具

若是隻是想在 DOM 結構中往上一點或者往下一點的移動當前被你選中的元素，你可使用 [ctrl] + [⬆] / [ctrl] + [⬇] ( [⌘] + [⬆] / [⌘] + [⬇] on Mac).post

此刻咱們能夠拖動，放置，編輯，複製 (固然，以及使用 [ctrl] + [v] 來粘貼), 因此一旦咱們在 Elements 面板中弄亂了咱們的 HTML 結構，咱們不該該感到驚訝。開發工具

在任何文本/圖形編輯器中的標準是什麼：spa

使用 [ctrl] + [z] ([⌘] + [z] on Mac) 撤銷咱們的任何改動。使用 [ctrl] + [shift] + [z] 從新編輯咱們的任何修改。翻譯

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

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

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

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

【譯】你不知道的Chrome調試工具技巧 第四天：the Elements panel（元素面板）