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

Question

使用Chrome开发工具,如何在准确的时间获取精确的屏幕截图进行分享

Answer 1

1. 将devtools对接模式切换到devtools设置三点图标中的单独窗口.
   (激活此选项后,您可以使用CtrlShiftD切换停靠/未停靠状态)
2. 通过CtrlShifti在devtools窗口聚焦时按下来调用devtools-for-devtools ,
   并在这个新的devtools-for-devtools窗口中执行以下操作:
   1. 打开Application标签
   2. 展开/打开框架 - 顶部 - 图像
   3. 单击左侧的任何图像URL进行查看
   4. 右键单击图像本身并选择 Save
   5. 重复3-4

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

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