特别声明
本文是作者 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 Tomek Sułkowski
其他系列
其他此系列的文章，马上就会翻译出来，到时会贴出对应的链接在此处。
- 【译】你不知道的Chrome调试工具技巧 第一天：console中的'$'
- 【译】你不知道的Chrome调试工具技巧 第二天：copying & saving
- 【译】你不知道的Chrome调试工具技巧 第三天：console methods
写在最后
如果你对我的翻译表示肯定，也可以关注我一波哦~ 顺便我的开源项目，求一波 star→ 看这里, 美丽的博客系统