如何从chrome dev工具性能框架获取屏幕截图

Question

使用Chrome开发工具，如何在准确的时间获取精确的屏幕截图

Answer 1

1. 将devtools对接模式切换到devtools设置三点图标中的单独窗口 （激活此选项后，您可以使用 Ctrl Shift D 切换停靠/取消停靠状态）
2. 在关注devtools窗口时按 Ctrl Shift i 调用devtools-for-devtools，
   并在这个新的devtools-for-devtools窗口中执行以下操作：
   1. 打开Application标签
   2. 展开/打开框架 - 顶部 - 图片
   3. 点击左侧的任意图片网址进行查看
   4. 右键点击图片本身，然后选择Save
   5. 重复3-4次

要查找当前显示的屏幕截图的网址：

1. 点击屏幕截图缩略图
下的Frames条中相应的绿色条
2. 在devtools-for-devtools中使用元素选择器 Ctrl Shift C 并单击主devtools窗口底部的迷你屏幕截图
3. 现在devtools-for-devtools会在元素树中显示<img>元素，右键单击其data:image/png和Open in Application panel，然后保存。