你不知道的Chrome调试工具技巧

开发必备技巧

【译】你不知道的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]重新编辑我们的任何修改。

其他系列

其他此系列的文章，马上就会翻译出来，到时会贴出对应的链接在此处。

• 【译】你不知道的Chrome调试工具技巧 第一天：console中的'$'
• 【译】你不知道的Chrome调试工具技巧 第二天：copying & saving
• 【译】你不知道的Chrome调试工具技巧 第三天：console methods
• 【译】你不知道的Chrome调试工具技巧 第四天：the Elements panel methods

作者：dendoink

链接：https://juejin.im/post/5c0d2d85f265da612061a62f
来源：掘金

免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。