【译】你不知道的Chrome调试工具技巧 第四天:the Elements panel(元素面板)

7,846

特别声明

本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列。据作者透露一共有 24篇 ,一直更新到12月24日
版权归原作者所有。

前两篇的翻译链接我已经给到了作者本人,虽然他不理解中文,但是他还是很开心哈哈,截图在最后

译者在翻译前已经和作者沟通得到了翻译整个系列的授权。
为了不影响大家阅读,授权的记录在这里

正文

在马上就要迎来假期的这 24 天里,我将会发布一系列短篇的文章,关于如何更加有意思的使用开发工具,昨天我们说到了第 11 个,所以今天我们就从 12 个,元素面板( Element panel )开始:

12. 通过 'h' 来隐藏

可以按下 'h' 来隐藏在元素面板中被你选中的元素。再次按下 'h' 使它出现。某些时候这是很有用的,例如你想截图,但是又不想里面包含一些敏感信息。

13. 拖动 & 放置 元素

当你想要看看页面某部分在 DOM 树的不同位置将如何显示的时候,只需拖动并且放置它(到指定的位置),就像在你机器上其他任何地方一样 :-)

14. 或者使用 control !(按钮)

如果只是想在 DOM 结构中往上一点或者往下一点的移动当前被你选中的元素,你可以使用 [ctrl] + [⬆] / [ctrl] + [⬇] ( [⌘] + [⬆] / [⌘] + [⬇] on Mac).

15. 它是一个基础编辑器

此刻我们可以拖动,放置,编辑,复制 (当然,以及使用 [ctrl] + [v] 来粘贴), 所以一旦我们在 Elements 面板中弄乱了我们的 HTML 结构,我们不应该感到惊讶。

在任何文本/图形编辑器中的标准是什么:

使用 [ctrl] + [z] ([⌘] + [z] on Mac) 撤销我们的任何改动。 使用 [ctrl] + [shift] + [z] 重新编辑我们的任何修改。

惯例: 如果你从这里学到了一些新东西

→ 你可以点个赞再走嘛~
→ 关注我的 Twitter Tomek Sułkowski

其他系列

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

写在最后

如果你对我的翻译表示肯定,也可以关注我一波哦~ 顺便我的开源项目,求一波 star→ 看这里, 美丽的博客系统

关于这次翻译,作者的回复