搬运自这里！

• 命令（Command）菜单

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

• 截取Dom元素

如果我们只想要截取我们页面中的一个Dom元素，我们可以直接选中那个节点，之后打开命令，使用节点截图Screenshot Capture node 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中的任何能拿到的资源

• 自定义devTools

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

• css/js覆盖率

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

• 自定义代码片段Snippets

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

• 媒体查询

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

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