如何从Chrome开发工具性能框架获取屏幕截图 [英] How to get screenshot from chrome dev tools performance frame
本文介绍了如何从Chrome开发工具性能框架获取屏幕截图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
使用Chrome开发者工具,如何在正确的时间获取准确的屏幕截图以进行共享
Using Chrome dev tools, how to get exact screenshot at exact time to share
推荐答案
- 在devtools设置三点图标中将devtools停靠模式切换到单独的窗口.
(激活此选项后,您可以使用 Ctrl Shift D 切换停靠/取消停靠状态) - 在devtools窗口聚焦时,按 Ctrl Shift i 调用devtools-for-devtools,
并在这个新的devtools-for-devtools窗口中执行以下操作:
- 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) - invoke devtools-for-devtools by pressing CtrlShifti when devtools window is focused,
and do the following in this new devtools-for-devtools window:
- 打开
Application
标签 - 展开/打开框架-顶部-图片
- 单击左侧的任何图像URL进行查看
- 右键单击图像本身,然后选择
Save
- 重复3-4
- open
Application
tab - expand/open Frames - top - Images
- click any image URL on the left to view it
- right-click the image itself and choose
Save
- repeat 3-4
要查找当前显示的屏幕快照的URL,请执行以下操作:
To find the URL of currently shown screenshot:
- 点击屏幕快照缩略图条下方的
Frames
条中相应的绿色条 - 在devtools-for-devtools中使用元素选择器 Ctrl Shift C 并单击devtools主窗口底部的迷你屏幕截图
- 现在devtools-for-devtools将在元素树中显示
<img>
元素,右键单击其data:image/png
和Open in Application panel
,然后将其保存.
- click the corresponding green bar in
Frames
strip under screenshot thumbnail strip - use element selector CtrlShiftC in devtools-for-devtools and click the mini-screenshot at the bottom of the main devtools window
- now devtools-for-devtools will show
<img>
element in the Elements tree, rightclick itsdata:image/png
andOpen in Application panel
, then save it.
这篇关于如何从Chrome开发工具性能框架获取屏幕截图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文