Chrome DevTools之命令(Command)菜单和动画检查

      之前介绍过很多Chrome的调试技巧，如Chrome DevTools之Elements、Chrome DevTools之Console&Sources调试、Chrome DevTools调试技巧之Network，今天再来介绍一下隐藏在工具栏之外的内容。

一、命令菜单

1、打开方式

      Windows快捷键 Ctrl+Shift+P；Mac快捷键command+shift+P。这里提供了很多用于调试的命令和操作，下面以截图操作进行说明。

2、截图DOM元素

      a. 截图某个DOM结点：选中需要截图的DOM结点，使用快捷键打开命令菜单，选择Screenshot Capture node screenshot命令，点击保存即可。

      b. 全屏截图：选择Screenshot Capture full size screenshot 命令，这里的全屏不只是可视区域，而是包括滚动条区域的内容，但需要注意的是，若页面是懒加载的，未加载出来的部分不会被截图。

二、动画检查

      Chrome对css动画也提供了调试工具，只是默认隐藏的，通过以下方式可打开动画调试面板。

      打开动画面板后，当页面中有动画出现时，就会在动画面板中记录下来，并可通过鼠标拖动来调整动画。