Chrome DevTools中的骚操作！"命令"菜单应该是很常用的，MacCmd + shift + PWindows

搬运自这里！

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

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

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

还可以通过命令Screenshot Capture full size screenshot命令全屏截图。 截取的并不是可视区域的，而是包含滚动条在内的所有页面内容

使用$_可以引用在控制台执行的前一步操作的返回值。如果我们正在控制台调试一些JavaScript代码，并且需要引用先前的返回值，那么这可能非常方便。

在和后端联调的时候，我们可能多次用到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功能和网络速度

可以通过全局方法copy()拿到console中的任何能拿到的资源

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

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

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

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

开发中如果我们有常用的一些JavaScript需要调试的，我们可以在Sources中的tab内的Snippets中保存下来

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

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

Chrome DevTools中的骚操作！