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

Question

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

Answer 1

打开 devtools-on-devtools：

1. 在 devtools 设置三点图标中将 devtools 停靠模式切换到单独的窗口。
   （激活此选项后，您可以使用 CtrlShiftD 切换停靠/取消停靠状态）
2. 在 windows 中按 CtrlShifti 或 ⌥⌘ 调用 devtools-for-devtools 我在mac中当devtools窗口被聚焦时

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

1. 打开Application标签
2. 展开/打开框架 - 顶部 - 图片
3. 点击左侧任意图片网址进行查看
4. 右键单击图像本身并选择Save
5. 重复 3-4

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

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