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

Posted 2023-03-07

【中文标题】如何从 chrome 开发工具性能框架中获取屏幕截图

【英文标题】：How to get screenshot from chrome dev tools performance frame

【发布时间】：2017-10-26 05:51:46

【问题描述】：

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

【参考方案1】：

打开 devtools-on-devtools：

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

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

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

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

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

【讨论】：

谢谢，所以我不需要去 devtools-for-devtools，我可以使用 Frame 部分

嗯？？你需要 devtools-for-devtools。屏幕截图列在其应用程序面板中。

LOL 很棒的技巧，太棒了

这似乎运作良好，但图像的分辨率非常低。有什么方法可以通过性能屏幕截图获得全分辨率版本？

图片大小为 256 千像素，即大约 500x500 像素。这是在 devtools 中硬编码的。