【译】你不知道的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（元素面板）