关于Chrome Devtools你可能有所不知的几个技巧

Cool Chrome DevTools tips and tricks you wish you knew already

在Elements面板中拖拽元素

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

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

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

在Console面板中操做上次表达式的结果

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

给元素添加样式、改变元素的状态?

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

+号按钮建立新的样式组合空间，同时咱们也能够修改选择器。翻译的很差你们看图体会。

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

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

截屏

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

使用CSS选择器进行元素选择

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

XHR/Fetch调试

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

对元素节点打断点

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

你们有啥好用的技巧欢迎补充?

【开发环境推荐】 Cloud Studio 是基于浏览器的集成式开发环境，支持绝大部分编程语言，包括 HTML五、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，无需下载安装程序，一键切换开发环境。 Cloud Studio提供了完整的 Linux 环境，而且支持自定义域名指向，动态计算资源调整，能够完成各类应用的开发编译与部署。