Chrome DevTools中的骚操做！

搬运自这里！

做为一名开发小白，开发中会常常用到Chrome devTools，最近看了一篇文章，搬运坐下笔记！

• 命令（Command）菜单

"命令"菜单应该是很经常使用的，MacCmd + shift + PWindowsCtrl + shift + P去打开命令菜单。

• 截取Dom元素

若是咱们只想要截取咱们页面中的一个Dom元素，咱们能够直接选中那个节点，以后打开命令，使用节点截图Screenshot Capture node screenshot就能够达到咱们想要的效果。

还能够经过命令 Screenshot Capture full size screenshot命令全屏截图。 截取的并非可视区域的，而是包含滚动条在内的全部页面内容

• 在控制台使用上次操做的值

使用$_能够引用在控制台执行的前一步操做的返回值。若是咱们正在控制台调试一些JavaScript代码，而且须要引用先前的返回值，那么这可能很是方便。

• 从新发起XHR请求

在和后端联调的时候，咱们可能屡次用到Network面板，可是想从新去查看一些请求内容的时候，咱们常常会采起一些简单粗暴的刷新，点击按钮等方式去触发XHR请求，Chrome给咱们提供了Replay XHR，咱们能够经过这个去发起新的请求，提升开发效率。

• 编译页面上的任何文本

咱们能够在控制台输入document.body.contentEditable="true"或者document.designMode = 'on'去实现对网页的编辑。

• 网络面板的幻灯片模式

Network面板下的Capture screenshots启动后，能够在页面加载的过程当中捕捉屏幕截图

• 动画检查

DevTools中有一个动画面板，默认状况下是关闭的，若是咱们在作一些css 动画的时候，咱们就能够去打开这个看下动画是如何工做的，好比background-color或transform 经过DevTools右上角菜单->More tools->Animations:

• 在地段设备或者弱网络状况下进行测试

咱们平时的开发环境网速还算能够，可是有时要考虑到网络环境很差的状况，Chrome DevTools中能够调节Cpu功能和网络速度

• copying&&saving

能够经过全局方法copy()拿到console中的任何能拿到的资源

若是咱们想把打印出的数据存储为全局变量，咱们只须要右键，选择 Store as global variable选项， 第一次使用的话，它会建立一个名为 temp1 的变量，第二次建立 temp2，以此类推。经过使用这些变量来操做对应的数据，不用再担忧影响到他们原来的值。(?)

• 自定义devTools

首先想要启动Allow custom UI themes 要在地址栏输入以下代码chrome://flags/#enable-devtools-experiments开启实验功能，并重启浏览器，

在控制台中 F1打开设置，切换到 Experiments启用 Allow custom UI themes

• css/js覆盖率

Chrome DevTools中的Coverage功能能够实现查看代码的覆盖率 f12打开调试板输入Show Coverage就能够调出，以后点击reload开始检测，绿色为用到，红色为没有用到。

• 自定义代码片断Snippets

开发中若是咱们有经常使用的一些JavaScript须要调试的，咱们能够在Sources中的tab内的Snippets中保存下来

• 媒体查询

媒体查询是自适应网页设计的基本部分。在Chrome DevTools中的设备模式下在三圆点菜单中点击 Show Media queries便可使用。

今天也是好好学习的一天！！！！！