Cool Chrome DevTools tips and tricks you wish you knew already

在Elements面板中拖拽元素

在Elements面板移动HTML元素，和UE沟通时快速预览效果。之前我只知道可以删除元素😂。

在Console面板中获取当前选中的元素

首先在Elements面板选中一个元素，然后在Console面板中输入$0回车。如果你的前端项目有使用jQuery，还可以使用$($0)进一步使用jQuery的API函数。

在Console的执行上下文中，使用$_获取上次表达式结果，并可以做进一步操作使用。

在Elements面板面板中还有3个特别有用的按钮。👈

+号按钮创建新的样式组合空间，同时我们也可以修改选择器。翻译的不好大家看图体会。

:hov使你可以手动更改元素状态，hover、active、focus等等

:cls快捷的给选中节点添加class

整个浏览器截屏&某个元素截屏
在Elements面板中选择一个元素然后输入快捷键cmd-shift-p (or ctrl-shift-p in Windows)输入shot然后有三个选项。如下图：

打开Elements面板，输入快捷键cmd-f (ctrl-f in Windows)，调出搜索框。

不推荐用，更喜欢在代码中添加debugger;短语。需在Source面板中进行操作,如下图：

选中元素节点、右键、Break-on下有三个选项，根据需求进行选择，分别为属性变更、子元素更改、元素移除时触发断点。

大家有啥好用的技巧欢迎补充👀