performance - 如何从 Chrome 开发工具性能框架中获取屏幕截图

Question

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

Answer 1

打开 devtools-on-devtools:

在 devtools 设置三点图标中将 devtools 停靠模式切换到单独的窗口。
(激活此选项后，您可以使用 CtrlShiftD 切换停靠/取消停靠状态)

当 devtools 窗口聚焦时，按 CtrlShifti 调用 devtools-for-devtools

现在，在这个新的 devtools-for-devtools 窗口中:

打开 Application标签

展开/打开框架 - 顶部 - 图像

单击左侧的任何图像 URL 以查看它

右键单击图像本身并选择 Save

重复 3-4

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

单击 Frames 中相应的绿色条截图缩略图条下的 strip

在 devtools-for-devtools 中使用元素选择器 CtrlShiftC 并单击主 devtools 窗口底部的小屏幕截图

现在 devtools-for-devtools 将显示 <img>元素树中的元素，右键单击其 data:image/png和 Open in Application panel ，然后保存。