命令（Command） 菜单
1.打开方式 按Cmd + Shift + P（如果使用Windows，则按Ctrl + Shift + P）打开“命令”菜单。
-
截图dom元素 Screenshot Capture node screenshot。实现全屏截图 ：通过 Screenshot Capture full size screenshot 命令。
3.重新发起xhr请求,我们可以通过google提供的Replay XHR的方式去发起一条新的请求
4.编辑页面上的任何文本 在控制台输入document.body.contentEditable="true"或者document.designMode = 'on'就可以实现对网页的编辑了。
5.网络面板（Network）的幻灯片模式 启动Network 面板下的Capture screenshots就可以在页面加载时捕捉屏幕截图。有点幻灯片的感觉。
屏幕快照 2020-05-27 下午5.43.06.png
单击每一帧截图，显示的就是对应时刻发生的网络请求。这种可视化的展现形式会让你更加清楚每一时刻发生的网络请求情况。
6.DevTools 中有一个动画面板，默认情况下它是关闭的，很多人可能不太清楚这个功能。它可以让你控制和操纵 CSS 动画，并且可视化这些动画是如何工作的。
要打开该面板，可以在 DevTools 右上角菜单 → More tools 中打开 Animations
7.在低端设备和弱网情况下进行测试
在Chrome DevTools中通过CMD/Ctrl + Shift + p打开命令菜单。然后输入Show Performance
打开性能面板。
8.Store as global variable
如果在console中打印了一堆数据，想对这堆数据做额外的操作，可以将它存储为一个全局变
量。只需要右击它，并选择 “Store as global variable”选项。第一次使用的话，它会创建一个
名为 temp1 的变量，第二次创建 temp2，第三次 ... 。通过使用这些变量来操作对应的数据，
不用再担心影响到他们原来的值。
9.CSS/JS 覆盖率 打开调试面板，用快捷键 shift+command+P （mac）输入 Show Coverage调出相应面板 点击reload 按钮开始检测 点击相应文件即可查看具体的覆盖情况（绿色的为用到的代码，红色表示没有用到的代码）
10.自定义代码片段 Snippets
在 Sources 这个tab栏下，有个 Snippets 标签，在里面可以添加一些常用的代码片段。
-
keys/values
这个是Devtools提供的快速查看一个对象的key、values的API
屏幕快照 2020-05-27 下午6.13.31.png
