如何从Chrome开发工具性能框架获取屏幕截图 [英] How to get screenshot from chrome dev tools performance frame

问题描述

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

Using Chrome dev tools, how to get exact screenshot at exact time to share

推荐答案

1. 在devtools设置三点图标中将devtools停靠模式切换到单独的窗口.
   (激活此选项后，您可以使用 Ctrl Shift D 切换停靠/取消停靠状态)
2. 在devtools窗口聚焦时，按 Ctrl Shift i 调用devtools-for-devtools，
   并在这个新的devtools-for-devtools窗口中执行以下操作:

1. switch devtools docking mode to a separate window in the devtools settings three-dot icon.
   (when this option is activated you can use CtrlShiftD to toggle docked/undocked state)
2. invoke devtools-for-devtools by pressing CtrlShifti when devtools window is focused,
   and do the following in this new devtools-for-devtools window:

1. 打开Application标签
2. 展开/打开框架-顶部-图片
3. 单击左侧的任何图像URL进行查看
4. 右键单击图像本身，然后选择Save
5. 重复3-4

1. open Application tab
2. expand/open Frames - top - Images
3. click any image URL on the left to view it
4. right-click the image itself and choose Save
5. repeat 3-4

要查找当前显示的屏幕快照的URL，请执行以下操作:

To find the URL of currently shown screenshot:

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

1. click the corresponding green bar in Frames strip under screenshot thumbnail strip
2. use element selector CtrlShiftC in devtools-for-devtools and click the mini-screenshot at the bottom of the main devtools window
3. now devtools-for-devtools will show <img> element in the Elements tree, rightclick its data:image/png and Open in Application panel, then save it.

这篇关于如何从Chrome开发工具性能框架获取屏幕截图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！