您所在的位置:首页 / 知识分享

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

2018.12.10

1751

suny

开发必备技巧

dendoink
2018年12月09日阅读 1398

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



其他系列

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



作者:dendoink

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





相关新闻

用一篇干货,帮你完全读懂可视化设计(尺寸篇)

2020.08.01

973

数据可视化设计中尺寸的确定是至关重要的,而尺寸的准确性,将直接影响到后期的设计、开发、适配及视觉效果清晰度等。为了更加准确高效的完成设计目标,前期确定好设计尺寸很关键,也是设计开始的必备条件。

并发扣款,怎么保证你的钱不会多扣?

2019.10.09

1526

用户购买商品的过程中,要对余额进行查询与修改,大致的业务流程如下​: